css spinner

css spinner.markdown

css spinner

A Pen by massimo on CodePen.

License.

index.jade

.container
  -for(var i = 0; i < 20; i++)
    .line

style.scss

$w: 5px;
$h: 20*$w;
$count: 20;
$time: 2s;
$delay: $time/2;

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

@include animation(rotate){
  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
  }
}

@include animation(move){
 0%,100%{
    height: $h;
  }
  50%{
    height: $h/2.5;
  }
}

body{
  overflow: hidden;
  background: #EF5350;
  
  .container{
    position: absolute;
    top: 50%;
    left: 50%;
   -webkit-animation: rotate 3*$time infinite;
   -moz-animation: rotate 3*$time infinite;
   -o-animation: rotate 3*$time infinite;
    animation: rotate 3*$time infinite;
   -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  
  .line{
    position: absolute;
    left: 50%;
    top: 50%;
    width: $w;
    height: $h;
    background: white;
    border-radius: $w;
   -ms-transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    
    @for $i from 1 through $count{
      &:nth-child(#{$i}){
       -ms-transform: rotate($i*(360deg/$count)); 
       -webkit-transform: rotate($i*(360deg/$count)); 
        transform: rotate($i*(360deg/$count)); 
       -webkit-animation: move $time infinite;
       -moz-animation: move $time infinite;
       -o-animation: move $time infinite;
        animation: move $time infinite;
        @if ($i % 2 == 0){
         -webkit-animation-delay: $delay; 
          animation-delay: $delay;  
        }
      }
    }
  }
}