Loader a Day (day 27)

index.html

<div class="loader">
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

Loader a Day (day 27).markdown

Loader a Day (day 27)

This one is messing with my head, but I like it! :-D

A Pen by Reinier Kaper on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/**
 * Document defaults
 */
body {
  text-align: center;
  background-color: #eee;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* The loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  
  width: 200px;
  height: 200px;
  
  margin-top: -100px;
  margin-left: -100px;
  
  perspective: 1000px;
  transform-style: perserve-3d;
}

/* The dots */
.dots {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  
  perspective: 200px;
  transform-style: perserve-3d;
  
  animation: dots 10000ms linear infinite;
}

.dots:nth-child(1) { animation-name: dots; }
.dots:nth-child(2) { animation-name: dots2; }
.dots:nth-child(3) { animation-name: dots3; }
.dots:nth-child(4) { animation-name: dots4; }
.dots:nth-child(5) { animation-name: dots5; }
.dots:nth-child(6) { animation-name: dots6; }

@keyframes dots {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-50px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(5760deg) translateZ(-100px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px);
  }
}

@keyframes dots2 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-36px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px);
  }
}

@keyframes dots3 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-24px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px);
  }
}

@keyframes dots4 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-14px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px);
  }
}

@keyframes dots5 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(-6px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px);
  }
}

@keyframes dots6 {
  0% {
    transform: rotateX(30deg) rotateZ(0deg) translateZ(0px);
  }
  50% {
    transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px);
  }
  100% {
    transform: rotateX(30deg) rotateZ(360deg) translateZ(0px);
  }
}

/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 10px;
  height: 10px;
  
  margin-left: -5px;
  margin-top: -5px;
  
  border-radius: 100px;
  
  background-color: #1e3f57;
  
  transform-style: perserve-3d;
  transform: rotateZ(0) translateY(0);
}

.dots:nth-child(6) .dot { background-color: #1e3f57; }
.dots:nth-child(1) .dot:nth-child(1) { transform: rotateZ(0) translateY(-10px); }
.dots:nth-child(1) .dot:nth-child(2) { transform: rotateZ(90deg) translateY(-10px) translateZ(-140px); }
.dots:nth-child(1) .dot:nth-child(3) { transform: rotateZ(180deg) translateY(-10px); }
.dots:nth-child(1) .dot:nth-child(4) { transform: rotateZ(270deg) translateY(-10px) translateZ(-140px); }

.dots:nth-child(5) .dot { background-color: #295068; }
.dots:nth-child(2) .dot:nth-child(1) { transform: rotateZ(0) translateY(-22px); }
.dots:nth-child(2) .dot:nth-child(2) { transform: rotateZ(45deg) translateY(-22px) translateZ(-120px); }
.dots:nth-child(2) .dot:nth-child(3) { transform: rotateZ(90deg) translateY(-22px); }
.dots:nth-child(2) .dot:nth-child(4) { transform: rotateZ(135deg) translateY(-22px) translateZ(-120px); }
.dots:nth-child(2) .dot:nth-child(5) { transform: rotateZ(180deg) translateY(-22px); }
.dots:nth-child(2) .dot:nth-child(6) { transform: rotateZ(225deg) translateY(-22px) translateZ(-120px); }
.dots:nth-child(2) .dot:nth-child(7) { transform: rotateZ(270deg) translateY(-22px); }
.dots:nth-child(2) .dot:nth-child(8) { transform: rotateZ(315deg) translateY(-22px) translateZ(-120px); }

.dots:nth-child(4) .dot { background-color: #3b6a83; }
.dots:nth-child(3) .dot:nth-child(1) { transform: rotateZ(0) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(2) { transform: rotateZ(30deg) translateY(-34px) translateZ(-100px); }
.dots:nth-child(3) .dot:nth-child(3) { transform: rotateZ(60deg) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(4) { transform: rotateZ(90deg) translateY(-34px) translateZ(-100px); }
.dots:nth-child(3) .dot:nth-child(5) { transform: rotateZ(120deg) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(6) { transform: rotateZ(150deg) translateY(-34px) translateZ(-100px); }
.dots:nth-child(3) .dot:nth-child(7) { transform: rotateZ(180deg) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(8) { transform: rotateZ(210deg) translateY(-34px) translateZ(-100px); }
.dots:nth-child(3) .dot:nth-child(9) { transform: rotateZ(240deg) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(10) { transform: rotateZ(270deg) translateY(-34px) translateZ(-100px); }
.dots:nth-child(3) .dot:nth-child(11) { transform: rotateZ(300deg) translateY(-34px); }
.dots:nth-child(3) .dot:nth-child(12) { transform: rotateZ(330deg) translateY(-34px) translateZ(-100px); }

.dots:nth-child(3) .dot { background-color: #4d86a0; }
.dots:nth-child(4) .dot:nth-child(1) { transform: rotateZ(0) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(2) { transform: rotateZ(20deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(3) { transform: rotateZ(40deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(4) { transform: rotateZ(60deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(5) { transform: rotateZ(80deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(6) { transform: rotateZ(100deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(7) { transform: rotateZ(120deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(8) { transform: rotateZ(140deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(9) { transform: rotateZ(160deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(10) { transform: rotateZ(180deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(11) { transform: rotateZ(200deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(12) { transform: rotateZ(220deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(13) { transform: rotateZ(240deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(14) { transform: rotateZ(260deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(15) { transform: rotateZ(280deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(16) { transform: rotateZ(300deg) translateY(-46px) translateZ(-80px); }
.dots:nth-child(4) .dot:nth-child(17) { transform: rotateZ(320deg) translateY(-46px); }
.dots:nth-child(4) .dot:nth-child(18) { transform: rotateZ(340deg) translateY(-46px) translateZ(-80px); }

.dots:nth-child(2) .dot { background-color: #5ea0ba; }
.dots:nth-child(5) .dot:nth-child(1) { transform: rotateZ(0) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(2) { transform: rotateZ(15deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(3) { transform: rotateZ(30deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(4) { transform: rotateZ(45deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(5) { transform: rotateZ(60deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(6) { transform: rotateZ(75deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(7) { transform: rotateZ(90deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(8) { transform: rotateZ(105deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(9) { transform: rotateZ(120deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(10) { transform: rotateZ(135deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(11) { transform: rotateZ(150deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(12) { transform: rotateZ(165deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(13) { transform: rotateZ(180deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(14) { transform: rotateZ(195deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(15) { transform: rotateZ(210deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(16) { transform: rotateZ(225deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(17) { transform: rotateZ(240deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(18) { transform: rotateZ(255deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(19) { transform: rotateZ(270deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(20) { transform: rotateZ(285deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(21) { transform: rotateZ(300deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(22) { transform: rotateZ(315deg) translateY(-58px) translateZ(-40px); }
.dots:nth-child(5) .dot:nth-child(23) { transform: rotateZ(330deg) translateY(-58px); }
.dots:nth-child(5) .dot:nth-child(24) { transform: rotateZ(345deg) translateY(-58px) translateZ(-40px); }

.dots:nth-child(1) .dot { background-color: #6bb1cd; }
.dots:nth-child(6) .dot:nth-child(1) { transform: rotateZ(0deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(2) { transform: rotateZ(10deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(3) { transform: rotateZ(20deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(4) { transform: rotateZ(30deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(5) { transform: rotateZ(40deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(6) { transform: rotateZ(50deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(7) { transform: rotateZ(60deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(8) { transform: rotateZ(70deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(9) { transform: rotateZ(80deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(10) { transform: rotateZ(90deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(11) { transform: rotateZ(100deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(12) { transform: rotateZ(110deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(13) { transform: rotateZ(120deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(14) { transform: rotateZ(130deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(15) { transform: rotateZ(140deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(16) { transform: rotateZ(150deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(17) { transform: rotateZ(160deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(18) { transform: rotateZ(170deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(19) { transform: rotateZ(180deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(20) { transform: rotateZ(190deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(21) { transform: rotateZ(200deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(22) { transform: rotateZ(210deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(23) { transform: rotateZ(220deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(24) { transform: rotateZ(230deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(25) { transform: rotateZ(240deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(26) { transform: rotateZ(250deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(27) { transform: rotateZ(260deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(28) { transform: rotateZ(270deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(29) { transform: rotateZ(280deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(30) { transform: rotateZ(290deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(31) { transform: rotateZ(300deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(32) { transform: rotateZ(310deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(33) { transform: rotateZ(320deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(34) { transform: rotateZ(330deg) translateY(-70px) translateZ(-20px); }
.dots:nth-child(6) .dot:nth-child(35) { transform: rotateZ(340deg) translateY(-70px); }
.dots:nth-child(6) .dot:nth-child(36) { transform: rotateZ(350deg) translateY(-70px) translateZ(-20px); }