.loader{
    width: 140px;
    height: 100px;
    margin: 50px auto 0;
    position: relative;
}

.loader .box{
    background: linear-gradient(to right,#38ef7d,#11998e);
    width: 50px;
    height: 10px;
    box-shadow: 2px 2px 3px 0px #000;
    position: absolute;
    top: 50%;
}

.loader .box1{
    left: 80px;
    animation: dominos 1s 0.125s ease infinite;
}

.loader .box2{
    left: 70px;
    animation: dominos 1s 0.3s ease infinite;
}

.loader .box3{
    left: 60px;
    animation: dominos 1s 0.425s ease infinite;
}

.loader .box4{
    left: 50px;
    animation: dominos 1s 0.540s ease infinite;
}

.loader .box5{
    left: 40px;
    animation: dominos 1s 0.665s ease infinite;
}

.loader .box6{
    left: 30px;
    animation: dominos 1s 0.79s ease infinite;
}

.loader .box7{
    left: 20px;
    animation: dominos 1s 0.9s ease infinite;
}

.loader .box8{
    left: 10px;
    animation: dominos 1s 1s ease infinite;
}

 @keyframes  dominos{
    50%{ opacity: 0.7; }
    75%{ transform: rotate(90deg); }
    80%{ opacity: 1; }
}