Plug in description :6 species CSS3 Cool preload Loading, Very cool and pure CSS3 Cool preload Loading Indicator animation effects . This group loading Indicators in total 6 Seed effect , They all use :before and :after Pseudo element , as well as CSS Frame animation to complete various preload indicator animations .
Implementation method


This is a very cool group of pure effects CSS3 Cool preload Loading Indicator animation effects . This group loading Indicators in total 6 Seed effect , They all use :before and :after Pseudo element , as well as CSS Frame animation to complete various preload indicator animations .

usage method

  Audio waveform Loading animation

HTML structure

use 5 Empty <span> element , Each represents a wave column .

1 2 3 4 5 6 7 <div id="preloader_1">     <span></span>     <span></span>
    <span></span>     <span></span>     <span></span> </div>
CSS style

Audio waveform Loading Animation effect by making each audio wave column height from 5 Pixel changes to 30 Pixel to complete . every last span Elements are all along Y Axial downward movement 15 pixel , Make animation move center start .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 #preloader_1{     position:
relative; } #preloader_1 span{     display:block;     bottom:0px;     width: 9px
;     height: 5px;     background:#9b59b6;     position:absolute;     
animation: preloader_1 1.5s  infinite ease-in-out; }   #preloader_1 
span:nth-child(2){     left:11px;     animation-delay: .2s;   } #preloader_1 
span:nth-child(3){     left:22px;     animation-delay: .4s; } #preloader_1 
span:nth-child(4){     left:33px;     animation-delay: .6s; } #preloader_1 
span:nth-child(5){     left:44px;     animation-delay: .8s; }
@keyframes preloader_1 {     0% {height:5px;transform:translateY(0px);background
:#9b59b6;}     25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}     100% {
height:5px;transform:translateY(0px);background:#9b59b6;} }
For each span Element settings 0.2 Second animation-delay Animation delay time , Animating them in turn with a high degree of variation .

  Circle to rectangle Loading animation

HTML structure

Circle to rectangle Loading Animation use 4 Empty <span> element , Each represents a circle / rectangle .

1 2 3 4 5 6 <div id="preloader_2">     <span></span>     <span></span>
    <span></span>     <span></span> </div>
CSS style

The loading Indicator animation by modifying border-radius Property to implement .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
#preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }
#preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; 
background: #9b59b6; position: absolute; } #preloader_2 span:nth-child(1
) { animation: preloader_2_1 1.5s infinite ease-in-out; } #preloader_2 
span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5
s infinite ease-in-out; } #preloader_2 span:nth-child(3) { top: 0px
; animation: preloader_2_3 1.5s infinite ease-in-out; } #preloader_2 
span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5
s infinite ease-in-out; }  @-keyframes preloader_2_1 {  0% {
-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px; }  
50% { -transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius:20px; background:#3498db; }  80% { -transform: translateX(0px
) translateY(0px) rotate(-360deg); border-radius:0px; }  100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;
} } @-keyframes preloader_2_2 {  0% { -transform: translateX(0px) translateY(0px
) rotate(0deg); border-radius:0px; }  50% { -transform: translateX(20px
) translateY(-10px) rotate(180deg); border-radius:20px; background:#f1c40f; }  
80% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:
0px; }  100% { -transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px; } } @-keyframes preloader_2_3 {  0% { -transform: translateX(
0px) translateY(0px) rotate(0deg); border-radius:0px; }  50% {
-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:
20px; background:#2ecc71; }  80% { -transform: translateX(0px) translateY(0px
) rotate(-360deg); border-radius:0px; }  100% { -transform: translateX(0px
) translateY(0px) rotate(-360deg); border-radius:0px; } }  
@-keyframes preloader_2_4 {  0% { -transform: translateX(0px) translateY(0px
) rotate(0deg); border-radius:0px; }  50% { -transform: translateX(20px
) translateY(10px) rotate(180deg); border-radius:20px; background:#e74c3c; }  
80% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:
0px; }  100% { -transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px; } }
  Cross graph transformation Loading animation

HTML structure

The loading Animation use div Element's :before and :after Make for elements . The animation of circle to square is generally modified by border-radius Property to implement .

1 <div id="preloader_3"></div>
CSS style

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 #preloader_3{     position:
relative; } #preloader_3:before{     width:20px;     height:20px;     
border-radius:20px;     background:blue;     content:'';     position:absolute;
    background:#9b59b6;     animation: preloader_3_before 1.5
s infinite ease-in-out; }     #preloader_3:after{     width:20px;     height:
20px;     border-radius:20px;     background:blue;     content:'';     position:
absolute;     background:#2ecc71;     left:22px;     animation: preloader_3
_after 1.5s infinite ease-in-out; }  @keyframes preloader_3_before {     0% 
{transform: translateX(0px) rotate(0deg)}     50% {transform: translateX(50px
) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}       100% 
{transform: translateX(0px) rotate(0deg)} } @keyframes preloader_3_after {     
0% {transform: translateX(0px)}     50% {transform: translateX(-50px) scale(1.2
) rotate(-260deg);background:#9b59b6;border-radius:0px;}     100% 
{transform: translateX(0px)} }
  Serpentine Loading animation

HTML structure

The loading Animation use div Element's :before and :after Make for elements . The animation of circle to square is generally modified by border-radius Property to implement .

1 2 3 4 5 6 7 <div id="preloader_4">     <span></span>     <span></span>
    <span></span>     <span></span>     <span></span> </div>
CSS style

The animation changes each span Element's Y Axis position , Move them down 10 Pixels , And change their color from blue to yellow . The shadow effect is modified box-shadow To complete .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 #preloader_4{     position:relative; } #preloader_4 span{     position:
absolute;     width:20px;     height:20px;     background:#3498db;     opacity:
0.5; border-radius:20px;     -animation: preloader_4 1s infinite ease-in-out;   
  } #preloader_4 span:nth-child(2){     left:20px;     animation-delay: .2s; }
#preloader_4 span:nth-child(3){     left:40px;     animation-delay: .4s; }
#preloader_4 span:nth-child(4){     left:60px;     animation-delay: .6s; }
#preloader_4 span:nth-child(5){     left:80px;     animation-delay: .8s; }
@keyframes preloader_4 {     0% {       opacity: 0.3;        
transform:translateY(0px);           box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1
);}     50% {       opacity: 1;        transform: translateY(-10px);        
background:#f1c40f;         box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}     
100%  {       opacity: 0.3;        transform:translateY(0px);        
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} }
  Rotating disc Loading animation

HTML structure

The loading Animation use div Element to make the center circle , And use div Element's :after Pseudo elements to make two lines of rotation .

1 <div id="preloader_5"></div>
CSS style


Use of two rotation lines :after Pseudo elements to make , By setting it up 50 Top and bottom of pixel border-radius Two create these two lines . Animation effects added to div On element , Change its color and pass transform:
rotate() Make it rotate .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 #preloader5{     position:relative;     
width:30px;     height:30px;     background:#3498db;     border-radius:50px;
    animation: preloader_5 1.5s infinite linear; } #preloader5:after{     
position:absolute;     width:50px;     height:50px;     border-top:10px solid 
#9b59b6;     border-bottom:10px solid #9b59b6;     border-left:10px solid 
transparent;     border-right:10px solid transparent;     border-radius:50px;
    content:'';     top:-20px;     left:-20px;     animation: preloader_5_after 
1.5s infinite linear; } @keyframes preloader_5 {     0% {transform: rotate(0
deg);}     50% {transform: rotate(180deg);background:#2ecc71;}     100% 
{transform: rotate(360deg);} } @keyframes preloader_5_after {     0% {border-top
:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}     50% {border-top:10px 
solid #3498db;border-bottom:10px solid #3498db;}     100% {border-top:10px solid
 #9b59b6;border-bottom:10px solid #9b59b6;} }
 windows sign Loading animation

HTML structure

every last span Represents a square .

1 2 3 4 5 6 <div id="preloader_6">     <span></span>     <span></span>
    <span></span>     <span></span> </div>
CSS style


All blocks are laid out in Grid . Animation added in main div On element , Make it rotate . in addition i An animation is to make each span Elements constantly from 100% Zoom to 50%. And passed animation-delay To control each span Animation delay time for .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
#preloader_6{     position:relative;     width: 42px;     height: 42px;     
animation: preloader_6 5s infinite linear; } #preloader_6 span{     width:20px;
    height:20px;     position:absolute;     background:red;     display:block;
    animation: preloader_6_span 1s infinite linear; } #preloader_6 
span:nth-child(1){   background:#2ecc71; } #preloader_6 span:nth-child(2){   
left:22px;   background:#9b59b6;   animation-delay: .2s; } #preloader_6 
span:nth-child(3){   top:22px;   background:#3498db;   animation-delay: .4s; }
#preloader_6 span:nth-child(4){   top:22px;   left:22px;   background:#f1c40f;
  animation-delay: .6s; } @keyframes preloader_6 {     
from {-ms-transform: rotate(0deg);}     to {-ms-transform: rotate(360deg);} }
@keyframes preloader_6_span {    0% { transform:scale(1); }    50% 
{ transform:scale(0.5); }    100% { transform:scale(1); } }

Technology
©2019-2020 Toolsou All rights reserved,
JS How to operate java Realize the function of grabbing red packets C Language programming to find a student's grade The United Nations 《 Glory of Kings 》 Please go to the studio : To save the earth Dialogue between apple and Nissan suspended ,Apple Car How's it going ?CSS architecture design China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour First knowledge MySQL Comprehensive review ( dried food )2021 year 1 Monthly programmer salary statistics , average 14915 element How to use it quickly html and css Write static page