Cog loading animation

cog-loading-animation.markdown

Cog loading animation

A quick loading animation using CSS. This is taken from the dribbble shot https://dribbble.com/shots/946595-App-loader-GIF-animation

A Pen by Jamie Coulter on CodePen.

License.

index.haml

.loader
  .loader_overlay
  .loader_cogs
    .loader_cogs__top
      -(1..3).each do
        .top_part
      .top_hole
    .loader_cogs__left
      -(1..3).each do
        .left_part
      .left_hole
    .loader_cogs__bottom
      -(1..3).each do
        .bottom_part
      .bottom_hole <!-- lol -->
    %p loading
  %h1 Cog loader
  %h2 Created in pure css

script.js

/* Inspired by this super groovy dribbble shot https://dribbble.com/shots/946595-App-loader-GIF-animation?list=searches&tag=loader&offset=3 */

scripts

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

style.scss

/* Fonts */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Variables */

$pink:#f98db9;
$blue:#97ddff;
$yellow:#ffcd66;
$font:'Montserrat', sans-serif;
$heading:rgb(87, 110, 129);
$sub:#F98DB9;

/* Mixins */

@mixin center{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

@mixin hole{
  border-radius:100%;
  background:white;
  position: absolute;
}

body{
  height:100vh;
  font-family:$font;
  text-align:center;
  overflow:hidden;
  h1{
    text-transform:uppercase;
    font-size:30px;
    color:$heading;
    margin:30px 0px 0px 0px;
  }
  h2{
    font-weight:normal;
    font-size:18px;
    color:$sub;
    margin:10px 0px 0px 0px;
  }
  p{
    margin:0 auto;
  }
  .loader{
    height:100%;
    position:relative;
    margin:auto;
    width:400px;
    &_overlay{
      width:150px;
      height:150px;
      background:transparent;
      box-shadow:0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
      border-radius:100%;
      z-index:-1;
      @include center;
    }
    &_cogs{
      z-index:-2;
      width:100px;
      height:100px;
      top: -120px !important;
      @include center;
      &__top{
        position:relative;
        width:100px;
        height:100px;
        transform-origin: 50px 50px;
        animation:rotate 10s infinite linear;
        @for $i from 1 through 3{
          div:nth-of-type(#{$i}){
            transform:rotate($i * 30deg)
          }
        }
        div.top_part{
          width:100px;
          border-radius:10px;
          position:absolute;
          height:100px;
          background:$pink;
        }
        div.top_hole{
          width:50px;
          height:50px;
          @include hole;
          @include center;
        }
      }
      &__left{
        position: relative;
        width: 80px;
        transform: rotate(16deg);
        top: 28px;
        transform-origin: 40px 40px;
        animation:rotate_left 10s .1s infinite reverse linear;
        left: -24px;
        height: 80px;
        @for $i from 1 through 3{
          div:nth-of-type(#{$i}){
            transform:rotate($i * 30deg)
          }
        }
        div.left_part{
          width:80px;
          border-radius:6px;
          position:absolute;
          height:80px;
          background:$blue;
        }
        div.left_hole{
          width:40px;
          height:40px;
          @include hole;
          @include center;
        }
      }
      &__bottom{
        position: relative;
        width: 60px;
        top: -65px;
        transform-origin: 30px 30px;
        animation:rotate_left 10.2s .4s infinite linear;
        transform: rotate(4deg);
        left: 79px;
        height: 60px;
        @for $i from 1 through 3{
          div:nth-of-type(#{$i}){
            transform:rotate($i * 30deg)
          }
        }
        div.bottom_part{
          width:60px;
          border-radius:5px;
          position:absolute;
          height:60px;
          background:$yellow;
        }
        div.bottom_hole{
          width:30px;
          height:30px;
          @include hole;
          @include center;
        }
      }
    }
  }
}

/* Animations */

@keyframes rotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes rotate_left{
  from{transform:rotate(16deg)}
  to{transform:rotate(376deg)}
}

@keyframes rotate_right{
  from{transform:rotate(4deg)}
  to{transform:rotate(364deg)}
}