css实现loading,CSS3实现10种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种效果：

代码如下：

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

代码如下：

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

代码如下：

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;

}

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