Loading Animation



Hey Folks! Today I'am going to share with you an amazing loading animation effect with CSS. It is very simple we can made it just by using span tag and style the span tag.




  <div class="container">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <h2>Loading Animation</h2>                    
                  
                



 body{
    background: #313131;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;

}
span{
    display: block;
    width: 4px;
    margin: 2.3px;
    height: 20px;
    background: #ffff;
    animation:effect 1s ease infinite alternate;

}
 span:nth-child(8){
    animation-delay: 1s;
}

span:nth-child(7){
    animation-delay: .9s;
}

span:nth-child(6){
    animation-delay: .8s;
}

span:nth-child(5){
    animation-delay: .7s;
}

span:nth-child(4){
    animation-delay: .6s;
}

span:nth-child(3){
    animation-delay: .5s;
} 

 span:nth-child(2){
    animation-delay: .4s;
}  

 span:nth-child(1){
    animation-delay: .3s;
} 

@keyframes effect{
    100%{
        transform: scaleY(4);
    }
}

h2{
    color:  rgb(253, 253, 253);
    font-family: sans-serif;
    text-align: center;
}