Simple CSS Circle Loading Animation - Cacher Snippet

4/14/2020 - 7:54 PM

Simple CSS Circle Loading Animation

Makes use of different borders, border radius and a perpetual spin animation.

css-loading-circle

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50px;
  -webkit-box-sizing: border-box;
  border: solid 8px rgba(255, 255, 255, 0.2);
  border-top-color: #FFF;
  -webkit-animation: spin 1s infinite linear;
}

@-webkit-keyframes spin { 
  100% { 
    -webkit-transform: rotate(360deg); 
  } 
}