A Pen by Kaushalya Mandaliya.

index.html

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

Loader.markdown

Loader

Just made another *cool loader...
*As I think.

A Pen by Kaushalya Mandaliya on CodePen.

License.

script.js

/*
 *
 * 2014 By Kaushalya Mandaliya | @kmandalwala
 *
 */

style.scss

@import "compass";
$var-1: 6em;

body {
  overflow: hidden;
}

.loader {
  background: red;
  height: $var-1;
  bottom: 0;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;  
  position: absolute;
  width: $var-1;
  
  @include animation(moveBuddy 2.5s linear infinite);
  @include border-radius(100%);
  @include box-shadow(0.1em 0.1em white, 0.3em 0.3em red, -0.1em -0.1em white, -0.3em -0.3em red);
}


@include keyframes(moveBuddy) {
  35% {
    background: green;    
    
    @include box-shadow(0.1em 0.1em white, 0.3em 0.3em green, -0.1em -0.1em white, -0.3em -0.3em green);
  }
  
  65% {
    background: blue;
    height: $var-1 * 2;
    width: $var-1 * 2;    
    
    @include box-shadow(0.1em 0.1em white, 0.3em 0.3em blue, -0.1em -0.1em white, -0.3em -0.3em blue);
    @include transform(rotate(360deg));
  }
}