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