This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Comments on the lottery

  • Raffle gift: 100 pieces, including badges, slippers, mugs, canvas bags, etc., will be distributed at random
  • Drawing time: Within 3 working days after the end of project Diggnation, all articles that meet the rules will be officially posted in the comments section
  • Lucky draw: Nuggets official random draw + manual verification
  • Comment content: comments, suggestions and discussions related to the content of the article. General comments such as “treading on” and “learning” will not win the prize

preface

Let’s be clear: the loads covered in this series are collected, not implemented by this author, and only CSS parsing is covered in this article. Don’t spray if you don’t like it!! .

Ask for a free like if you like it

Why write this article? During normal development, we encounter loading, either in the UI framework, or baidu, and then CV into the project? However, their own implementation, and there will be no idea. Over time, HE became a CV engineer. This article is for different loading methods, explain the ideas, I hope you can not only use, but also write. Real knowledge comes from practice.

This article only covers loading text. Others will be covered in other articles.

loader-1

Implementation logic

Watch carefully: the color of the text changes from bottom to top. It’s kind of like water ripple loading. But the implementation is pretty simple. Let me show you an example.

div{
  font-size:30px;
  height:20px;
  overflow: hidden;
}
<div>content</div>
Copy the code

The end result: only half of the text appears.So that’s how you think about it. Is there just two overlapping divs one red word, one white word. You can do this by animating the height of the white div. Yes, it can.

However, we can do this with just one div. You can do it before.

How to design animation; It’s really easy to set the height from 100% to zero.

@keyframes loaderHeight { 0% { height: 100%; } 100% { height: 0%; }}Copy the code

The complete code

First, define a base with red text color.

.loader-1 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-1">Loading</span>
Copy the code

Then use :after plus the upper layer.

.loader-1::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 50%;
    overflow: hidden;
    animation: loaderHeight 6s linear infinite;
}
Copy the code

This is the effect of a height of 50%. Plus the effects of the animation shown at the beginning.

loader-2

Implementation logic

Width: laoder-1 is from bottom to top. Width: laoder-1 is from bottom to top.

But there’s another point here. That’s what words do. The bottom text is shaded. It looks hollow in the middle, but it’s not, because the background color matches the text itself. Let me switch colors so it’s clear.

The text shadow in CSS is text-shadow.

text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
Copy the code

Animation is easy here, loader-1 controls height and width.

@keyframes loderWidth { 0% { width: 0%; } 100% { width: 100%; }}Copy the code

The complete code

.loader-2{
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-2">Loading </span>
Copy the code
.loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}

Copy the code

loader-3

This is the most creative text I have ever loaded!!

Implementation logic

Watch carefully. There are a few points to note.

  • The letter L, the moving capital L, does the corner feel unnatural? In fact, the “I” on the top is not the “L”, it’s a separate one, just one layer above.
  • The letter I, if you look at the letter I, it’s moving, but it’s not moving, it’s just moving a little bit.
  • Ball: The ball is in motion. When the ball reaches the position of the letter, the letter will move.

Let me break it down at the end.

Now that we’ve broken it down, let’s see what we can do. Let’s not worry about adding divs and things like that, just use :after and :before. Some of you might say, well, you have four extra tags here, but you only have two tags how do you do that? Quite simply, there is only one element, but elements can add a lot of content. Like border, shadows, things like that.

Now, if I get a little bit of a sense of what’s going on here, I’m going to use shadows for 1 and 2, and I’m going to use after and before for 3 and 4.

The complete code

A space is used here as a placeholder.

<span class="loader-3">Load&nbsp; ng </span> .loader-113 { color: #FFF; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 48px; letter-spacing: 4px; }Copy the code

The following is before

.loader-3::before { content: ""; position: absolute; right: 70px; bottom: 10px; height: 28px; Width: 5.15 px; background: currentColor; animation: loaderL 1s linear infinite alternate; }Copy the code

The effect is as follows, you can see that the 3 is already there, but the 1 and 2 are not there, because we haven’t shaded them yet.With this animation, we can see the effect.

@keyframes loaderL {0% {box-shadow: 0-6px, -122.9px-8px; } 25%, 75% {box-shadow: 0 0px, -122.9px-8px; } 100% {box-shadow: 0 0px, -122.9px-16px; }}Copy the code

Plus a ball

.loader-3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    animation: animloader113 1s linear infinite alternate;
  }
Copy the code

Finally add the animation of the ball.

@keyframes animloader113 { 0% { transform: translate(0px, 0px) scaleX(1); } 14% {transform: translate(-12px, -16px) scaleX(1.05); } 28 {transform: translate(-27px, -28px) scaleX(1.07); } 42% {transform: translate(-46px, -35px) scaleX(1.1); } 57% {transform: translate(-70px, -37px) scaleX(1.1); } 71% {transform: translate(-94px, -32px) scaleX(1.07); } 85% {transform: translate(-111px, -22px) scaleX(1.05); } 100% { transform: translate(-125px, -9px) scaleX(1); }}Copy the code

loader-4

Implementation logic

Watch carefully, two dots;

  • The text slants in the shadow.
  • Blurring of text

Skew in CSS: transform: skew()

CSS Blur: Gaussian blur filter: blur(0px)

The complete code

<span class="loader-4">Loading </span>
.loader-119 {
    font-size: 48px;
    letter-spacing: 2px;
    color: #FFF;
    animation: loader4 1s ease-in infinite alternate;
}
Copy the code

animation

 @-webkit-keyframes loader4 {
    0% {
      filter: blur(0px);
      transform: skew(0deg);
    }
    100% {
      filter: blur(3px);
      transform: skew(-4deg); }}Copy the code