<h1>Pure CSS Loading Spinner Animation</h1>
<p>Runs at 60fps with zero re-paints!</p>
<div id="loading">
  <p>Loading...</p>
  <div id="spinner"></div>
</div>

#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eaa;
  padding: 3em;
  width: 200px;
}

@keyframes spin {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(180deg); }
}

#spinner {
  position: relative;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #eee;
  border-bottom: 25px solid #eee;
  border-radius: 50%;
  will-change: transform;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#spinner:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  top: -25px;
  left: -25px;
  border-left: 25px solid #ccc;
  border-right: 25px solid #ccc;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-radius: 50%;
  will-change: transform;
  animation-name: spin;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}