A Pen by Adam Henley.

index.haml

#spinner

Spinner-1.markdown

Spinner 1

Experimenting/evaluating with LESS, LESSHat & CSS keyframes

A Pen by Adam Henley on CodePen.

License.

style.less

body{background-color:rgb(200,230,255);}
.circle(@d){
    width:@d;
    height:@d;
    .border-radius(50%);
} 
#spinner{
  @spinner_diam: 200px;
  @inner_spinner_ratio_begin: 0.2;
  @inner_spinner_left_begin: 20px; //@spinner_diam/2 - ((@spinner_diam*@inner_spinner_ratio_begin)/2);
  @inner_spinner_top_begin:@spinner_diam/2 - ((@spinner_diam*@inner_spinner_ratio_begin)/2);
  
  @inner_spinner_ratio_lower: 0.1;
  @inner_spinner_ratio_upper: 0.3;
  
  
  @spinner_bg: rgb(130, 130, 130) ;
   
  border:none;color:red;
  background-color: @spinner_bg;
  .circle( @spinner_diam );
  position:absolute;
  top:0; right:0; bottom:0; left:0; margin:auto;
  .animation(outer 10s linear infinite);
  
  .outer_keyframes(){
      0% { .rotate(0deg);   } 
     25% { .rotate(180deg); } 
     50% { .rotate(360deg); } 
     75% { .rotate(540deg); } 
    100% { .rotate(720deg); }
  }

  @-webkit-keyframes outer  { .outer_keyframes(); }
     @-moz-keyframes outer  { .outer_keyframes(); }
       @-o-keyframes outer  { .outer_keyframes(); }
          @keyframes outer  { .outer_keyframes(); }
  
  
  &:after{
    content:'';
    border:none;
    display:block;
    background-color: white; 
    .circle( @spinner_diam*@inner_spinner_ratio_begin);
    position:absolute;
    margin:0;
    left: @inner_spinner_left_begin;
    top:  @inner_spinner_top_begin;
    .animation(inner 10s linear infinite);
   

    .inner_keyframes(){
        0% { width:10px; height:10px; }
       25% { width:50px; height:50px; } 
       50% { width:30px; height:30px; } 
       75% { width:50px; height:50px; } 
      100% { width:10px; height:10px; }    
    }

    @-webkit-keyframes inner  { .inner_keyframes(); }
       @-moz-keyframes inner  { .inner_keyframes(); }
         @-o-keyframes inner  { .inner_keyframes(); }
            @keyframes inner  { .inner_keyframes(); }
    
  }  
}