A Pen by Kaushalya Mandaliya.

index.html

<div class="load"></div>



<a id="seebeetee" href="http://seebeetee.com">KR From SeeBeeTee</a>

script.js

/*
 * Weird loader (Probably)
 * 2014 by Kaushalya Mandaliya
 * @kmandalwala | http://seebeetee.com
 */

style.scss

@import "compass/css3";
$yo: 10em;
$full: 100%;

$bg1: #9b59b6;
$bg2: #ecf0f1;

body {
  background: $bg1;
  overflow: hidden;
}



.load {
  background: $bg2;
  width: $yo / 2;
  height: $yo / 2;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  @include animation(doit 4s ease-in-out infinite);
  @include box-shadow(1em 1em 0 0.2em rgba(white, 0.3), -1em -1em 0 0.2em rgba(black, 0.3));
}

@include keyframes(doit) {
  50% {
    width: $full / 3;
    height: $full / 3;
  }
  
  60% {
    @include transform(rotate(360deg));
    //@include border-radius($full / 4);
    @include box-shadow(1em 1em 1em rgba(white, 0.3), -1em 1em 1em rgba(black, 0.3), -1em -1em 1em rgba(white, 0.3), 1em -1em 1em rgba(black, 0.3));
  }
}


#seebeetee {
  position: absolute;
  right: 0.1em;
  bottom: 0.1em;
  color: white;
  text-decoration: none;
  border-bottom: 0.1em solid;
}

Weird-loader-(Probably).markdown

Weird loader (Probably)

A Pen by Kaushalya Mandaliya on CodePen.

License.