.loader{
    position: relative;
}
.loader>span{
    display: block;
    position: absolute;
    width:40%;
    height:5%;
    opacity: 1;
    animation: loader 1s infinite;
}
@keyframes loader{
    0%{opacity: 1}
    50%{opacity: .2}
    100%{opacity: 1}
}
.loader>span:nth-child(1){
    left:0%;
    top:50%;
}
.loader>span:nth-child(2){
    left:10%;
    top:25%;
    transform:rotate(45deg);
    animation-delay: .13s;
}
.loader>span:nth-child(3){
    left: 35%;
    top: 14%;
    transform:rotate(90deg);
    animation-delay: .26s;
}
.loader>span:nth-child(4){
    left: 60%;
    top: 25%;
    transform:rotate(135deg);
    animation-delay: .39s;
}
.loader>span:nth-child(5){
    left:70%;
    top:50%;
    transform:rotate(180deg);
    animation-delay: .52s;
}
.loader>span:nth-child(6){
    left:60%;
    top:75%;
    transform:rotate(225deg);
    animation-delay: .65s;
}
.loader>span:nth-child(7){
    left: 35%;
    top: 85%;
    transform:rotate(270deg);
    animation-delay: .78s;
}
.loader>span:nth-child(8){
    left: 10%;
    top: 75%;
    transform:rotate(315deg);
    animation-delay: .91s;
}

.loaderTwo{
    position: relative;
}

.loaderTwo>ul{
    display: flex;
    margin:0px;
    padding:0px;
}

.loaderTwo>ul>li{
    width:.28rem;
    height: 1.28rem;
    background:#ccc;
    margin-right:.3rem;
    list-style: none;
    border-radius: 1rem;
    position: absolute;
    bottom:0px;
    animation: loaderTwo 1s ease alternate infinite;;
}

.loaderTwo>ul>li:nth-child(1){
    animation-delay: .0s;
}

.loaderTwo>ul>li:nth-child(2){
    left:.6rem;
    animation-delay: .33s;
}

.loaderTwo>ul>li:nth-child(3){
    left:1.2rem;
    animation-delay: .66s;
}

@keyframes loaderTwo{
    0%{height: 1.28rem}
    50%{height: .1rem}
    100%{height: 1.28rem}
}



.loaderThree>ul{
    display: flex;
    margin:0px;
    padding:0px;
}

.loaderThree>ul>li{
    width:.28rem;
    height: .28rem;
    background:#ccc;
    margin-right:.3rem;
    list-style: none;
    border-radius: 50%;
    animation:opacityRadius 1s infinite;
}

.loaderThree>ul>li:nth-child(1){
    animation-delay: .0s;
}

.loaderThree>ul>li:nth-child(2){
    animation-delay: .33s;
}

.loaderThree>ul>li:nth-child(3){
    animation-delay: .66s;
}

@keyframes opacityRadius {
    0%{opacity: 1}
    50%{opacity: .2}
    100%{opacity: 1}
}