.spinner {
    height:60px;
    width:60px;
    margin:0 auto;
    position:relative;
   position: absolute;
   top:50%;
   left:50%;
   margin: -(60px/2) 0 0 -(60px/2);
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
    border:6px solid rgba(0,0,0,.2);
    border-radius:100%;
 }
 
 .spinner:before {
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:-6px;
    height:100%;
    width:100%;
    border-top:6px solid rgba(0,0,0,.8);
    border-left:6px solid transparent;
    border-bottom:6px solid transparent;
    border-right:6px solid transparent;
    border-radius:100%;
 }
 
 @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
 }
 @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
 }
 @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
 }
 @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
   }