Bouncing Ball Loader

on
Bouncing Ball Loader Using HTML & CSS Page Title

Source code

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
      <style>
      body {
 box-sizing:border-box;
 margin: 0;
 padding: 0;
}
.bouncer{height:100px;
         width: 100px;
         margin:100px;}
.bouncer div{height:20%;
width: 20%;
background: #0077ff;
border-radius: 50%;
justify-content:space-around;
display:inline-block ;
animation:bouncer 0.5s cubic-bezier(.0,.82,.51,.98) infinite alternate  ;
}
.bouncer div:nth-child(2){
    animation-delay:0.1s;
    opacity:0.8;
}
.bouncer div:nth-child(3){
    animation-delay:0.2s;
    opacity:0.6;
}

.bouncer div:nth-child(4){
    animation-delay:0.3s;
    opacity:0.4;
}
@keyframes bouncer{
    0%{transform:translateY(0);}
    100%{transform:translateY(100px);}
}
      </style>
    </head>
    <body>
    <div class="bouncer">
    
<div></div>
<div></div>
<div></div>
<div></div>


</div>

        
    </body>
</html>

Comments

Post a Comment