CSS3 easily implements fresh Loading effect and css3loading

CSS3 easily implements fresh Loading effect and css3loading

So far, HTML5 China has shared several hundred Loading animations Based on CSS3. The cool code is concise and worth learning; today we will share with you two common examples of CSS3 Loading.

First effect:

1 <div class = "loading"> 2 <span> </span> 3 <span> </span> 4 <span> </span> 5 <span> </span> 6 <span> </span> 7 </div>

 

CSS3

.loading{     width: 80px;     height: 40px;     margin: 0 auto;     margin-top:100px; } .loading span{     display: inline-block;     width: 8px;     height: 100%;     border-radius: 4px;     background: lightgreen;     -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{     0%,100%{         height: 40px;         background: lightgreen;     }     50%{         height: 70px;         margin: -15px 0;         background: lightblue;     } } .loading span:nth-child(2){     -webkit-animation-delay:0.2s; } .loading span:nth-child(3){     -webkit-animation-delay:0.4s; } .loading span:nth-child(4){     -webkit-animation-delay:0.6s; } .loading span:nth-child(5){     -webkit-animation-delay:0.8s; }

 

Second effect:

HTML section

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

 

CSS3

.loadEffect{    width: 100px;    height: 100px;    position: relative;    margin: 0 auto;    margin-top:100px; } .loadEffect span{    display: inline-block;    width: 16px;    height: 16px;    border-radius: 50%;    background: lightgreen;    position: absolute;    -webkit-animation: load 1.04s ease infinite; } @-webkit-keyframes load{    0%{       opacity: 1;    }    100%{       opacity: 0.2;    } } .loadEffect span:nth-child(1){    left: 0;    top: 50%;    margin-top:-8px;    -webkit-animation-delay:0.13s; } .loadEffect span:nth-child(2){    left: 14px;    top: 14px;    -webkit-animation-delay:0.26s; } .loadEffect span:nth-child(3){    left: 50%;    top: 0;    margin-left: -8px;    -webkit-animation-delay:0.39s; } .loadEffect span:nth-child(4){    top: 14px;    right:14px;    -webkit-animation-delay:0.52s; } .loadEffect span:nth-child(5){    right: 0;    top: 50%;    margin-top:-8px;    -webkit-animation-delay:0.65s; } .loadEffect span:nth-child(6){    right: 14px;    bottom:14px;    -webkit-animation-delay:0.78s; } .loadEffect span:nth-child(7){    bottom: 0;    left: 50%;    margin-left: -8px;    -webkit-animation-delay:0.91s; } .loadEffect span:nth-child(8){    bottom: 14px;    left: 14px;    -webkit-animation-delay:1.04s; }

 

The above two are common loading effects, and the following is not dependent on the actual code. Please leave a message for me if you need it!

More results are as follows:

Third loading effect

Fourth loading effect

Fifth loading effect

Sixth loading effect

7. loading Effect

 

These effects are all implemented with CSS3. Are they amazing? Remember to leave me a message if you want to learn it! If you have a better performance, please send it to me secretly!

If you have any questions, click:Xiaoyue blogContact me!