Skip to content

Instantly share code, notes, and snippets.

/Loader-a-Day-(day-27).markdown

Created July 29, 2014 17:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/c2985ab21e142a31958a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/c2985ab21e142a31958a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jul 29, 2014.
    9 changes: 9 additions & 0 deletions Loader-a-Day-(day-27).markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Loader a Day (day 27)
    ---------------------
    This one is messing with my head, but I like it! :-D

    Forked from [Reinier Kaper](http://codepen.io/TheDutchCoder/)'s Pen [Loader a Day (day 27)](http://codepen.io/TheDutchCoder/pen/sdLJi/).

    A [Pen](http://codepen.io/anon/pen/jBCxs) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/jBCxs/license).
    116 changes: 116 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <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>
    258 changes: 258 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,258 @@
    /**
    * 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); }