.demo{ background: #e84393; }
.loader{
width: 150px;
height: 150px;
margin: 0 auto;
position: relative;
}
.loader ul{
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
text-indent: 2.8em;
position: absolute;
left: calc(50% - 0.7em);
top: calc(50% - 4.2em);
}
.loader ul li:after,
.loader ul:after{
background-color: #fff;
width: 1.1em;
height: 1.1em;
box-shadow: 0 0 3px #fff;
border-radius: 100%;
}
.loader ul li:after,
.loader ul:after{
content: "";
display: block;
}
.loader ul:after{
position: absolute;
top: 2.8em;
}
.loader li:after{ animation: dotAnimationTwo 2.5s infinite; }
.loader li{
padding-bottom: 5.6em;
position: absolute;
top: 0;
left: 0;
}
.loader li:nth-child(1){
transform: rotate(0deg);
animation-delay: 0.125s;
}
.loader li:nth-child(1):after{ animation-delay: 0.125s; }
.loader li:nth-child(2){
transform: rotate(36deg);
animation-delay: 0.25s;
}
.loader li:nth-child(2):after{ animation-delay: 0.25s; }
.loader li:nth-child(3){
transform: rotate(72deg);
animation-delay: 0.375s;
}
.loader li:nth-child(3):after{ animation-delay: 0.375s; }
.loader li:nth-child(4){
transform: rotate(108deg);
animation-delay: 0.5s;
}
.loader li:nth-child(4):after{ animation-delay: 0.5s; }
.loader li:nth-child(5){
transform: rotate(144deg);
animation-delay: 0.625s;
}
.loader li:nth-child(5):after{ animation-delay: 0.625s; }
.loader li:nth-child(6){
transform: rotate(180deg);
animation-delay: 0.75s;
}
.loader li:nth-child(6):after{ animation-delay: 0.75s; }
.loader li:nth-child(7){
transform: rotate(216deg);
animation-delay: 0.875s;
}
.loader li:nth-child(7):after{ animation-delay: 0.875s; }
.loader li:nth-child(8){
transform: rotate(252deg);
animation-delay: 1s;
}
.loader li:nth-child(8):after{ animation-delay: 1s; }
.loader li:nth-child(9){
transform: rotate(288deg);
animation-delay: 1.125s;
}
.loader li:nth-child(9):after{ animation-delay: 1.125s; }
.loader li:nth-child(10){
transform: rotate(324deg);
animation-delay: 1.25s;
}
.loader li:nth-child(10):after{ animation-delay: 1.25s; }
.loader li{ animation: dotAnimation 2.5s infinite; }
@keyframes dotAnimation{
0%, 55%, 100%{ padding: 0 0 5.6em 0; }
5%, 50%{ padding: 2.8em 0; }
}
@keyframes dotAnimationTwo{
0%, 55%, 100%{
opacity: 1;
transform: scale(1);
}
5%, 50%{
opacity: 0.5;
transform: scale(0.5);
}
}