<h1>Pure CSS spinner</h1>

<div class="spinner"></div>
h1{
  margin: 20px auto;
  color: orange;
  text-align: center;
  text-transform: uppercase;
}

@dim : 60px;

.spinner {
   height:@dim;
   width:@dim;
//   margin:0 auto;
//   position:relative;
  position: absolute;
  top:50%;
  left:50%;
  margin: -(@dim/2) 0 0 -(@dim/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:-6px;
   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(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js