<span class="spinner"></span>
.spinner,.spinner:after{
    width: 64px;
    height: 64px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -32px;
    margin-left: -32px;
    border-radius: 50%;
    z-index: 2
 }
.spinner {
    background-color: transparent;
    border-top: 10px solid rgb(66,139,202);
    border-right: 10px solid rgb(66,139,202);
    border-bottom: 10px solid rgb(66,139,202);
    border-left: 10px solid rgba(66,139,202,.2);
    transform: translateZ(0);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: .8s;
    animation-name: spinner-loading
 }
@keyframes spinner-loading{
  0% {
      transform: rotate(0deg)
  } to {
      transform: rotate(1turn)
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.