<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Pure CSS Loading Spinner</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
 <div class="loader">
  <div class="spinner">
   
  </div>
 </div>

</body>
</html>
.loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }

  .spinner {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: red;
   border-right-color: red;
   border-bottom-color: red;
   animation: load 1s linear infinite;

  }

  @keyframes load {
   25% {
             transform: rotate(100deg);
             border-top-color: #F20DEA;
    border-right-color: #F20DEA;
    border-bottom-color: #F20DEA;

   }

   50% {
             transform: rotate(200deg);
             border-top-color: #0CF43D;
    border-right-color: #0CF43D;
    border-bottom-color: #0CF43D;
   }

   75% {
             transform: rotate(300deg);
             border-top-color: #E9F70D;
    border-right-color: #E9F70D;
    border-bottom-color: #E9F70D;
   }

   100% {
             transform: rotate(360deg);
             border-top-color: #064FF5;
    border-right-color: #064FF5;
    border-bottom-color: #064FF5;
   }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.