Loader dots

In this example below you will see how to do a Loader dots with some HTML / CSS and Javascript

I miscalculated my geometry but I liked the end result nonetheless.

Thumbnail
This awesome code was written by rockhill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rockhill ©
  • HTML
  • CSS
  • JavaScript
    <div class="center">
  <div class="bouncywrap">
        
        <div class="dotcon dc1">
        <div class="dot"></div>
        </div>
    
        <div class="dotcon dc2">
        <div class="dot"></div>
        </div>
    
        <div class="dotcon dc3">
        <div class="dot"></div>
        </div>
 
  </div>
</div>

/*Downloaded from https://www.codeseek.co/rockhill/loader-dots-ukebp */
    @import url(https://fonts.googleapis.com/css?family=Raleway:900,700,500,300,100);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  background: linear-gradient(to bottom, rgb(30,30,33), rgb(23,23,27));
  height: 100%;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.bouncywrap{
  position: relative;
}


.dotcon{
  display: block;
  float: left;
  width: 50px;
  position: absolute;
}

.dc1{
  -webkit-animation: bouncy1 1.5s infinite;
  left: -40px;
  animation: bouncy1 1.5s infinite;
}

.dc2{
  -webkit-animation: bouncy2 1.5s infinite;
  animation: bouncy2 1.5s infinite;
  left: 0;
}

.dc3{
  -webkit-animation: bouncy3 1.5s infinite;
  animation: bouncy3 1.5s infinite;
  left: 40px;
}

.dot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: rgba(150,160,180,0.8);
}


@-webkit-keyframes bouncy1{
  0% {-webkit-transform: translate(0px,0px) rotate(0deg);}
  50% {-webkit-transform: translate(0px,0px) rotate(180deg);}
  100% {-webkit-transform: translate(40px,0px) rotate(-180deg);}
}

@keyframes bouncy1{
  0% {transform: translate(0px,0px) rotate(0deg);}
  50% {transform: translate(0px,0px) rotate(180deg);}
  100% {transform: translate(40px,0px) rotate(-180deg);}
}

@-webkit-keyframes bouncy2{
  0% {-webkit-transform: translateX(0px);}
  50% {-webkit-transform: translateX(-40px);}
  100% {-webkit-transform: translateX(-40px);}
}

@keyframes bouncy2{
  0% {transform: translateX(0px);}
  50% {transform: translateX(-40px);}
  100% {transform: translateX(-40px);}
}

@-webkit-keyframes bouncy3{
  0% {-webkit-transform: translateX(0px);}
  50% {-webkit-transform: translateX(0px);}
  100% {-webkit-transform: translateX(-40px);}
}

@keyframes bouncy3{
  0% {transform: translateX(0px);}
  50% {transform: translateX(0px);}
  100% {transform: translateX(-40px);}
}


/*Downloaded from https://www.codeseek.co/rockhill/loader-dots-ukebp */
    

Comments