利用CSS3实现18种漂亮loading样式效果

想与众不同,就得标新立异,WEB最长见的loading就能让你的网页别具一格,通过CSS3换个loading换个风格!

先看看效果,有喜欢的,直接下面选择代码使用即可:

效果1:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.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;
 }

效果2:

<div class="loading">
         <span></span>
</div>
.loading{
     width: 150px;
     height: 4px;
     border-radius: 2px;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
     background: lightgreen;
     -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 }
 .loading span{
     display: inline-block;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     margin-top: -7px;
     margin-left:-8px;
     -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 }
 @-webkit-keyframes changeBgColor{
     0%{
         background: lightgreen;
     }
     100%{
         background: lightblue;
     }
 }
 @-webkit-keyframes changePosition{
     0%{
         background: lightgreen;
     }
     100%{
         margin-left: 142px;
         background: lightblue;
     }
 }

效果3:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
     }
     100%{
         opacity: 0;
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果4:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
         -webkit-transform: scale(1.3);
     }
     100%{
         opacity: 0.2;
         -webkit-transform: scale(.3);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果5:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     position: relative;
     margin-top:100px;
 }
 .loading span{
     position: absolute;
     width: 15px;
     height: 100%;
     border-radius: 50%;
     background: lightgreen;
     -webkit-animation: load 1.04s ease-in infinite alternate;
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
         -webkit-transform: translate(0px);
     }
     100%{
         opacity: 0.2;
         -webkit-transform: translate(150px);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果6:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
     text-align: center;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
     }
     100%{
         opacity: 0;
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果7:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-transform-origin: right bottom;
     -webkit-animation: load 1s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
     }
     100%{
         opacity: 0;
         -webkit-transform: rotate(90deg);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果8:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-transform-origin: right bottom;
     -webkit-animation: load 1s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
         -webkit-transform: scale(1);
     }
     100%{
         opacity: 0;
         -webkit-transform: rotate(90deg) scale(.3);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果9:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.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;
 }

效果10:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loadEffect{
     width: 100px;
     height: 100px;
     position: relative;
     margin: 0 auto;
     margin-top:100px;
 }
 .loadEffect span{
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
     0%{
         -webkit-transform: scale(1.2);
         opacity: 1;
     }
     100%{
         -webkit-transform: scale(.3);
         opacity: 0.5;
     }
 }
 .loadEffect span:nth-child(1){
     left: 0;
     top: 50%;
     margin-top:-10px;
     -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: -10px;
     -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:-10px;
     -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: -10px;
     -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
     bottom: 14px;
     left: 14px;
     -webkit-animation-delay:1.04s;
 }

效果11:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.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 1.04s ease infinite;
 }
 @-webkit-keyframes load{
     0%,100%{
         height: 40px;
         background: lightgreen;
     }
     50%{
         height: 60px;
         margin-top: -20px;
         background: lightblue;
     }
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.52s;
 }

效果12:

<div class="loading">
         <span></span>
</div>
.loading{
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
     border:5px solid lightgreen;
     -webkit-animation: turn 2s linear infinite;
 }
 .loading span{
     display: inline-block;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     left: 50%;
     margin-top: -15px;
     margin-left: -15px;
     -webkit-animation: changeBgColor 2s linear infinite;
 }
 @-webkit-keyframes changeBgColor{
     0%{
         background: lightgreen;
     }
     100%{
         background: lightblue;
     }
 }
 @-webkit-keyframes turn{
     0%{
         -webkit-transform: rotate(0deg);
         border-color: lightgreen;
     }
     100%{
         -webkit-transform: rotate(360deg);
         border-color: lightblue;
     }
 }

效果13:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loading{
     width: 150px;
     height: 15px;
     margin: 0 auto;
     margin-top:100px;
     text-align: center;
 }
 .loading span{
     display: inline-block;
     width: 15px;
     height: 100%;
     margin-right: 5px;
     background: lightgreen;
     -webkit-animation: load 1.04s ease infinite;
 }
 .loading span:last-child{
     margin-right: 0px; 
 }
 @-webkit-keyframes load{
     0%{
         opacity: 1;
         -webkit-transform: scale(1.2);
     }
     100%{
         opacity: .2;
         -webkit-transform: scale(.2);
     }
 }
 .loading span:nth-child(1){
     -webkit-animation-delay:0.13s;
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.26s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.39s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.52s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.65s;
 }

效果14:

<div class="loading">
         <span></span>
</div>
.loading{
     width: 150px;
     height: 8px;
     border-radius: 4px;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
     background: lightblue;
     overflow: hidden;
 }
 .loading span{
     display:block;
     width: 100%;
     height: 100%;
     border-radius: 3px;
     background: lightgreen;
     -webkit-animation: changePosition 4s linear infinite;
 }
 @-webkit-keyframes changePosition{
     0%{
         -webkit-transform: translate(-150px);
     }
     50%{
         -webkit-transform: translate(0);
     }
     100%{
         -webkit-transform: translate(150px);
     }
 }

效果15:

<div class="loading">
         <span></span>
</div>
.loading{
     width: 200px;
     height: 60px;
     margin: 0 auto;
     margin-top: 100px;
     position: relative;
 }
 .loading span{
     width: 50px;
     height: 30px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     top: 50%;
     margin-top: -15px;
     overflow: hidden;
     -webkit-animation: changePosition 2.08s linear infinite;
 }
 @-webkit-keyframes changePosition{
     0%,100%{
         -webkit-transform: translate(70px);
     }
     20%{
         width: 50px;
         height: 30px;
         margin-top:-15px;
         -webkit-transform: translate(0px);
     }
     30%{
         width: 20px;
         height: 60px;
         margin-top:-30px;
         -webkit-transform: translate(0px);
     }
     35%{
         width: 50px;
         height: 30px;
         margin-top:-15px;
         -webkit-transform: translate(5px);
         background: lightblue;
     }
     70%{
         width: 50px;
         height: 30px;
         margin-top:-15px;
         -webkit-transform: translate(160px);
     }
     80%{
         width: 20px;
         height: 60px;
         margin-top:-30px;
         -webkit-transform: translate(160px);
     }
     85%{
         width: 50px;
         height: 30px;
         margin-top:-15px;
         -webkit-transform: translate(155px);
         background: lightgreen;
     }
 }

效果16:

<div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
</div>
.loadEffect{
     width: 100px;
     height: 100px;
     position: relative;
     margin: 0 auto;
     margin-top:100px;
 }
 .loadEffect span{
     display: inline-block;
     width: 30px;
     height: 10px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     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:-5px;
     -webkit-animation-delay:0.13s;
 }
 .loadEffect span:nth-child(2){
     left: 10px;
     top: 20px;
     -webkit-transform: rotate(45deg);
     -webkit-animation-delay:0.26s;
 }
 .loadEffect span:nth-child(3){
     left: 50%;
     top: 10px;
     margin-left: -15px;
     -webkit-transform: rotate(90deg);
     -webkit-animation-delay:0.39s;
 }
 .loadEffect span:nth-child(4){
     top: 20px;
     right:10px;
     -webkit-transform: rotate(135deg);
     -webkit-animation-delay:0.52s;
 }
 .loadEffect span:nth-child(5){
     right: 0;
     top: 50%;
     margin-top:-5px;
     -webkit-transform: rotate(180deg);
     -webkit-animation-delay:0.65s;
 }
 .loadEffect span:nth-child(6){
     right: 10px;
     bottom:20px;
     -webkit-transform: rotate(225deg);
     -webkit-animation-delay:0.78s;
 }
 .loadEffect span:nth-child(7){
     bottom: 10px;
     left: 50%;
     margin-left: -15px;
     -webkit-transform: rotate(270deg);
     -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
     bottom: 20px;
     left: 10px;
     -webkit-transform: rotate(315deg);
     -webkit-animation-delay:1.04s;
 }

效果17:

<div class="loadEffect">
         <div><span></span></div>
         <div><span></span></div>
         <div><span></span></div>
         <div><span></span></div>
</div>
.loadEffect {
     width: 100px;
     height: 100px;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
 }
 .loadEffect div{
     width: 100%;
     height: 100%;
     position: absolute;
     -webkit-animation: load 2.08s linear infinite;
 }
 .loadEffect div span{
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: lightgreen;
     position: absolute;
     left: 50%;
     margin-top: -10px;
     margin-left: -10px;
 }
 @-webkit-keyframes load{
     0%{
         -webkit-transform: rotate(0deg);
     }
     10%{
         -webkit-transform: rotate(45deg);
     }
     50%{
         opacity: 1;
         -webkit-transform: rotate(160deg);
     }
     62%{
         opacity: 0;
     }
     65%{
         opacity: 0;
         -webkit-transform: rotate(200deg);
     }
     90%{
         -webkit-transform: rotate(340deg);
     }
     100%{
         -webkit-transform: rotate(360deg);
     }
 }
 .loadEffect div:nth-child(1){
     -webkit-animation-delay:0.2s;
 }
 .loadEffect div:nth-child(2){
     -webkit-animation-delay:0.4s;
 }
 .loadEffect div:nth-child(3){
     -webkit-animation-delay:0.6s;
 }
 .loadEffect div:nth-child(4){
     -webkit-animation-delay:0.8s;
 }

效果18:

<div class="loading">
         <div><span></span></div>
         <div><span></span></div>
         <div><span></span></div>
</div>
.loading{
     width: 60px;
     height: 60px;
     margin: 0 auto;
     margin-top:100px;
     position: relative;
     -webkit-animation: load 3s linear infinite;
 }
 .loading div{
     width: 100%;
     height: 100%;
     position: absolute;
 }
 .loading span{
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #99CC66;
     position: absolute;
     left: 50%;
     margin-top: -10px;
     margin-left: -10px;
     -webkit-animation: changeBgColor 3s ease infinite;
 }
 @-webkit-keyframes load{
     0%{
         -webkit-transform: rotate(0deg);
     }
     33.3%{
         -webkit-transform: rotate(120deg);
     }
     66.6%{
         -webkit-transform: rotate(240deg);
     }
     100%{
         -webkit-transform: rotate(360deg);
     }
 }
 @-webkit-keyframes changeBgColor{
     0%,100%{
         background: #99CC66;
     }
     33.3%{
         background: #FFFF66;
     }
     66.6%{
         background: #FF6666;
     }
 }
 .loading div:nth-child(2){
     -webkit-transform: rotate(120deg);
 }
 .loading div:nth-child(3){
     -webkit-transform: rotate(240deg);
 }
 .loading div:nth-child(2) span{
     -webkit-animation-delay: 1s;
 }
 .loading div:nth-child(3) span{
     -webkit-animation-delay: 2s;
 }