Css3: Create loading animation effects during loading

The common loading usually uses a GIF to achieve the animation effect. In fact, we can use the css3 feature to make it. This article introduces a method for making css3 with Linear Loading effect.

Ajax loading is often encountered in Web development. Do you use GIF to load the icons?
By the way, there is a tool website that customizes the small icon of the loader GIF. Click here to view

This article introduces a linear style loading style. Click here to view the demo

We all know that the essence of an animation is that a frame of a vibrating screen is played in sequence, so we have the following design ideas:

Draw five small circles in a row. The five small circles always take one second to complete the animation with transparency ranging from 1 to 0.1. However, the playback time of each animation varies by 0.2 seconds.

See Code implementation:

First draw five small circles:

HTML code

<div class="loader"><span></span><span></span><span></span><span></span><span></span></div>

CSS code

.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;}

Next, let's customize the animation.

CSS code

.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;}@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}
Finally, we add the latency animation command:
CSS code
.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;}.loader span:nth-of-type(2) {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}.loader span:nth-of-type(3) {-webkit-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}.loader span:nth-of-type(4) {-webkit-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}.loader span:nth-of-type(5) {-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}
Finally, complete the production.
If you need to adjust the number and time, you can customize the time according to the principle. However, it is best to ensure the time interval of the gradient. If it is too slow, it will make people feel powerless to load, and if it is too fast, it will make people feel uncomfortable.
 
 
  
  

   
   
Copyright statement: Free Reprint-non commercial-Non derivative-keep the signature | Creative Commons BY-NC-ND 3.0
   
   
Http://soasmeblog.sinaapp.com/posts/46.html