<div class="preloader"></div>

<div class="info">
<p>Article about this Pen: 
  <p><a href="https://ruslanyusupov.com/sandbox/animated-css-preloader-loading-spinner" target="_blank">https://ruslanyusupov.com/sandbox/animated-css-preloader-loading-spinner</a></p>
      <p>Photo from <a href="https://www.pexels.com" target="_blank">www.pexels.com</a></p>
</div>

.preloader {
  border: 15px solid gold; 
  border-top: 15px solid #7510f7;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  animation: spinner 1.5s linear infinite;
  margin: 0 auto;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.info {
  margin-top: 100px;
}

a {
  color: gold;
  text-decoration: none;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.