css实现loading,CSS3实现18种Loading效果

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

第1种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

loading4

loading5

代码如下：

第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种效果：

loading7

loading8

代码如下：

第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种效果：

loading10

代码如下：

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

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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种效果：

代码如下：

.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样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。