A Pen by kaushalya.

index.html

<div class="loader"></div>
<div class="pause">Click To Pause</div>
<div class="kanu">By <a href="http://seebeetee.com">Kaushalya Mandaliya</a></div>

One-div-simple-Loader.markdown

One div simple Loader

Only one <div> loader...

Check it out dude

A Pen by kaushalya on CodePen.

License.

script.js

/*
 * One div simple Loader
 *
 *
 *   
 * 2013 By Kaushalya R Mandaliya.
 * https://twitter.com/kmandalwala
 * http://seebeetee.com
 *
 */
$(".pause").click(function(){
  $(".loader").toggleClass("pauseit");
  
  if($(this).text().match("Pause")) {
    $(this).text("Click To Play"); 
  }
  else {
    $(this).text("Click To Pause"); 
  }
});

style.scss

@import "compass";
@mixin animation($value) {
  -webkit-animation: #{$value};
     -moz-animation: #{$value};
      -ms-animation: #{$value};
          animation: #{$value};
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content; }
     @-moz-keyframes #{$name} { @content; }
       @-o-keyframes #{$name} { @content; }
          @keyframes #{$name} { @content; }
}

body {
  padding: 0;
  margin: 0;
  background: #34495e;
}

.loader {
  background: rgba(189,195,199,1);
  height: 3em;
  width: 3em;
  margin: 7em auto;
  @include animation(loadit 4s linear infinite);
}

@include keyframes(loadit) {
  41% {
    background: rgba(189,195,199,0.4);
    @include border-radius(100%);
    @include transform (rotate(360deg));
    @include box-shadow(7em 0 0 rgba(189,195,199,0.3),-7em 0 0 rgba(189,195,199,0.3),3em 0 0 rgba(189,195,199,0.3),-3em 0 0 rgba(189,195,199,0.3),0 7em 0 rgba(189,195,199,0.3),0 -7em 0 rgba(189,195,199,0.3),0 3em 0 rgba(189,195,199,0.3),0 -3em 0 rgba(189,195,199,0.3));
  }
  71% {
    background: #34495e; 
    @include box-shadow(7em 0 0 rgba(189,195,199,0.1),-7em 0 0 rgba(189,195,199,0.1),3em 0 0 rgba(189,195,199,0.1),-3em 0 0 rgba(189,195,199,0.1),0 7em 0 rgba(189,195,199,0.1),0 -7em 0 rgba(189,195,199,0.1),0 3em 0 rgba(189,195,199,0.1),0 -3em 0 rgba(189,195,199,0.1));
    @include border-radius(100%);
    @include transform(rotate(720deg));
  }
  100% {
    background: #34495e;
    @include transform (rotate(1080deg));
  }
}

.pause {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  color: rgba(189,195,199,0.4);
  cursor: pointer;
}

.pauseit {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.kanu {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  color: rgba(189,195,199,0.4);
}  

.kanu a{
  color: inherit;
  text-decoration: none;
}