View Compiled
  // 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

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

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

  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
    transform: rotateZ(360deg)
    transform: rotateZ(0deg)

  position: absolute
  top: 50%
  left: 50%
  margin: -90px 0 0 -90px
  background-color: hsl(0,0%,10%)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.