CSS3实现18种Loading效果

jopen 6年前

昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记……

第一种效果

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<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-5种效果:

CSS3实现18种Loading效果

CSS3实现18种Loading效果

CSS3实现18种Loading效果

代码如下:

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

第3-5种效果的css样式分别为:

.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;          }
.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;          }
.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-8种效果:

CSS3实现18种Loading效果

CSS3实现18种Loading效果

CSS3实现18种Loading效果

代码如下:

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

第6-8种效果的css样式分别为:

.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;          }
.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;          }
.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-10种效果:

CSS3实现18种Loading效果

CSS3实现18种Loading效果

代码如下:

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

CSS样式分别为:

.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;          }
.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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

<div class="loadEffect">          <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种效果:

CSS3实现18种Loading效果

代码如下:

<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种效果:

CSS3实现18种Loading效果

代码如下:

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

PS:CSS样式代码其实很多重复,主要就是动画不一样,但为了方便以后直接拿来用,就先不整理了。

via: jianshu.com ,作者: JR93

来自: http://webres.wang/18-css3-loading-effect/