A Pen by jupegarnica.

CSS-loading-animation.markdown

CSS loading animation

so sync

               amaze                                    such loading
                     


                                     such animation

much cloud

                                               such wow

       such code 
                                             so legacy

A Pen by jupegarnica on CodePen.

License.

index.html

<div class="container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

script.js

/* Palette from http://julianlloyd.me/scrollreveal/ */

style.css

body {
  margin: 0;
  padding: 0;
  background: #191f27;
}

.container {
  width: 200px;
  height: 100px;
  padding-top: 100px;
  margin: 0 auto;
}

.ball {
  width: 10px;
  height: 10px;
  margin: 10px auto;
  border-radius: 50px;
  }    
    .ball:nth-child(1) {
      background: #ff005d;
      -webkit-animation: right 1s infinite ease-in-out;
      -moz-animation: right 1s infinite ease-in-out;
      animation: right 1s infinite ease-in-out;    
    }

    .ball:nth-child(2) {
      background: #35ff99;
      -webkit-animation: left 1.1s infinite ease-in-out;
      -moz-animation: left 1.1s infinite ease-in-out;
      animation: left 1.1s infinite ease-in-out;
    }

    .ball:nth-child(3) {
      background: #008597;
      -webkit-animation: right 1.05s infinite ease-in-out;
      -moz-animation: right 1.05s infinite ease-in-out;
      animation: right 1.05s infinite ease-in-out;
    }

    .ball:nth-child(4) {
      background: #ffcc00;
      -webkit-animation: left 1.15s infinite ease-in-out;
      -moz-animation: left 1.15s infinite ease-in-out;
      animation: left 1.15s infinite ease-in-out;
     }

    .ball:nth-child(5) {
      background: #2d3443;  
      -webkit-animation: right 1.1s infinite ease-in-out;
      -moz-animation: right 1.1s infinite ease-in-out;
      animation: right 1.1s infinite ease-in-out;
    }

    .ball:nth-child(6) {
      background: #ff7c35;  
      -webkit-animation: left 1.05s infinite ease-in-out;
      -moz-animation: left 1.05s infinite ease-in-out;
      animation: left 1.05s infinite ease-in-out;
     }

    .ball:nth-child(7) {
      background: #4d407c;  
      -webkit-animation: right 1s infinite ease-in-out;
      -moz-animation: right 1s infinite ease-in-out;
      animation: right 1s infinite ease-in-out;
    }


@-webkit-keyframes right {
  0%   { -webkit-transform: translate(-15px);   }
  50%  { -webkit-transform: translate(15px);    }
  100% { -webkit-transform: translate(-15px);   }
}

@-webkit-keyframes left {
  0%   { -webkit-transform: translate(15px);    }
  50%  { -webkit-transform: translate(-15px);   }
  100% { -webkit-transform: translate(15px);    }
}

@-moz-keyframes right {
  0%   { -moz-transform: translate(-15px);   }
  50%  { -moz-transform: translate(15px);    }
  100% { -moz-transform: translate(-15px);   }
}

@-moz-keyframes left {
  0%   { -moz-transform: translate(15px);    }
  50%  { -moz-transform: translate(-15px);   }
  100% { -moz-transform: translate(15px);    }
}

@keyframes right {
  0%   { transform: translate(-15px);  }
  50%  { transform: translate(15px);   }
  100% { transform: translate(-15px);  }
}

@keyframes left {
  0%   { transform: translate(15px);   }
  50%  { transform: translate(-15px);  }
  100% { transform: translate(15px);   }
}