.loader
  .circle.one
  .circle.two
  .circle.three

.circle
  // absolute position with 3d animation = render layer
  position: absolute
  
  border: 3px solid transparent
  border-top-color: hsl(83, 82%, 53%)
  border-radius: 50%
  
  animation: rotate linear infinite

.circle.one
  height: 50px
  width: 50px
  left: 50px
  top: 50px
  animation-duration: 0.85s

.circle.two
  height: 75px
  width: 75px
  top: 38px
  left: 38px
  animation-duration: 0.95s

.circle.three
  height: 100px
  width: 100px
  top: 25px
  left: 25px
  animation-duration: 1.05s

@keyframes rotate
  // rotate on 3d transform for best perf, it ensures GPU accelerated animation
  from
    transform: rotateZ(360deg)
  to
    transform: rotateZ(0deg)

.loader
  position: absolute
  top: 50%
  left: 50%
  margin: -90px 0 0 -90px
  
body
  background-color: hsl(0,0%,10%)