body { background: #222; }

.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #333;
  border-radius: 50%;
}

.inner-circle {
  width: 92%;
  height: 92%;
  background: #222;
  border-radius: 50%;
  margin: auto;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
}

.spinner {
  height: 0;
  width: 0;
  border-radius: 50%;
  border-right: 50px solid rgba(255,255,255,0.3);
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid transparent;

  -webkit-animation: rotate 1.6s infinite;

          animation: rotate 1.6s infinite;
}

@-webkit-keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}