css3实现的加载动画效果

第css3实现的加载动画效果div

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

li/li

/ul

/div

.peeek-loading{

background-color:#38d368;

overflow:hidden;

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

height:100%;

width:100%;

.peeek-loadingul{

position:absolute;

left:calc(50%-0.7em);

top:calc(50%-4.2em);

display:inline-block;

text-indent:2.8em;

.peeek-loadingulli:after,

.peeek-loadingul:after{

width:1.4em;

height:1.4em;

background-color:#fff;

border-radius:100%;

.peeek-loadingulli:after,

.peeek-loadingul:after{

content:

display:block;

.peeek-loadingul:after{

position:absolute;

top:2.8em;

.peeek-loadingli{

position:absolute;

padding-bottom:5.6em;

top:0;

left:0;

.peeek-loadingli:nth-child(1){

transform:rotate(0deg);

animation-delay:0.125s;

.peeek-loadingli:nth-child(1):after{

animation-delay:0.125s;

.peeek-loadingli:nth-child(2){

transform:rotate(36deg);

animation-delay:0.25s;

.peeek-loadingli:nth-child(2):after{

animation-delay:0.25s;

.peeek-loadingli:nth-child(3){

transform:rotate(72deg);

animation-delay:0.375s;

.peeek-loadingli:nth-child(3):after{

animation-delay:0.375s;

.peeek-loadingli:nth-child(4){

transform:rotate(108deg);

animation-delay:0.5s;

.peeek-loadingli:nth-child(4):after{

animation-delay:0.5s;

.peeek-loadingli:nth-child(5){

transform:rotate(144deg);

animation-delay:0.625s;

.peeek-loadingli:nth-child(5):after{

animation-delay:0.625s;

.peeek-loadingli:nth-child(6){

transform:rotate(180deg);

animation-delay:0.75s;

.peeek-loadingli:nth-child(6):after{

animation-delay:0.75s;

.peeek-loadingli:nth-child(7){

transform:rotate(216deg);

animation-delay:0.875s;

.peeek-loadingli:nth-child(7):after{

animation-delay:0.875s;

.peeek-loadingli:nth-child(8){

transform:rotate(252deg);

animation-delay:1s;

.peeek-loadingli:nth-child(8):after{

animation-delay:1s;

.peeek-loadingli:nth-child(9){

transform:rotate(288deg);

animation-delay:1.125s;

.peeek-loadingli:nth-child(9):after{

animation-delay:1.125s;

.peeek-loadingli:nth-child(10){

transform:rotate(324deg);

animation-delay:1.25s;

.peeek-loadingli:nth-child(10):after{

animation-delay:1.25s;

.peeek-loadingli{

animation:dotAnimation2.5sinfinite;

@keyframesdotAnimation{

0%,55%,100%{

padding:005.6em0;

5%,50%{

padding:2.8em0;

.peeek-loadingli:after{

animation:dotAnimationTwo2.5sinfinite;

@-webkit-keyframesdotAnimationTwo{

0%,55%,100%{

opaci