The beating "loading" is amazing!

Hello everyone, I'm Pinellia 👴, a sand sculpture programmer who has just started writing articles. If you like my article, you can follow ➕ Like 👍 Add me on WeChat: frontendpicker , learn and communicate front-end together, become a better engineer ~ pay attention to the public No.: Pinellia in front-end , learn more about front-end knowledge! Click me to explore the new world!

Original link ==> http://sylblog.xin/archives/72

foreword

Like and ask for a free like

Why write such an article? When we usually develop, we encounter loading, either in the UI framework, or Baidu, and then CV into the project? However, when you realize it yourself, you will have no idea. Over time, I became a CV engineer. This article explains the ideas for different loading methods. I hope everyone can not only use them, but also write them. Practice brings true knowledge.

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

loader-1

implement logic

Look closely: the color of the text changes from the bottom to the top. Kind of like the effect of water ripple loading. But the implementation is actually very simple. Let me show you an example first.

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

This is the final effect: the text only appears halfway.

So everyone's ideas will come out. Isn't it as long as there are two overlapping divs with a red word and a white word. Is it possible to achieve this effect by using animation to gradually reduce the height of the white word div. Yes, it can.

However, we can do this with just one div. :after or :before can also do this.

How should the animation be designed; it's actually quite simple to set the height from 100% to 0.

 @keyframes loaderHeight {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

full code

First define a text color with a red base.

 .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>

Then use :after to add 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;
}

This is the effect of a height of 50%. With the effect of animation, it has been shown at the beginning.

loader-2

implement logic

The simplest: laoder-1 is from bottom to top, this is from left to right, isn't it related to width?

But there is another point here. That's the effect of text. The underlying text is shaded. It looks hollow in the middle, but it's not, it's just because the background color matches the color of the text itself.
I changed the color and it became clear.

The shadow of text in CSS is text-shadow.

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

The animation is very simple here, loader-1 controls the height, and the width is controlled here.

 @keyframes loderWidth {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

full 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>

 .loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}

loader-3

This is the most creative text load I have ever seen! ! !

implement logic

Careful observation, there are a few points to pay special attention to.

• The letter L, the moving capital L, do you think the corner is very unnatural, in fact, the I above is not L, but a separate one, just on the upper layer.
• The letter I, look carefully at the letter I behind it, it changes dynamically, but its movement is not the whole movement, only the upper part is moving.
• Ball: The ball is in motion. When the ball reaches the position of the letter, the letter will move.

Finally I split it up.

The decomposition is over, let's study how to do it. We don't consider other things such as adding divs, we simply use :after and :before to achieve it. Some people here may say, you have four extra, how to achieve only two labels? Very simple, the element itself is indeed only one, but the element can add a lot of content. Such as borders, shadows and the like.

Speaking of this, is it a bit of a thought? Look, can 1 and 2 be implemented with shadows, and 3 and 4 can be implemented with after and before.

full code

A space is used here to occupy the place.

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

below is before

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

  }

The effect is as follows, you can see that 3 has come out, but 1 and 2 have not appeared, this is because we have not added shadows.

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;
    }
  }

add the 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;
  }

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);
    }
  }

loader-4

implement logic

Watch carefully, two points;

• The text is slanted in the shaded state.
• text blurred

Skew in CSS: transform: skew()

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

full code

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

animation

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