/* https://10015.io/tools/css-loader-generator  */
/* <div class="spinner"></div>                  */

.spinner {
   display          : grid;   /* grid */
   position         : absolute;
   top              : 50%;
   left             : 50%;
   width            : 60px;
   height           : 60px;
   margin-left      : -30px;
   margin-top       : -180px;
   border-radius    : 50%;
   -webkit-mask     : radial-gradient(farthest-side,#0000 40%,#f4f4f4 41%);
   background       : linear-gradient(0deg ,rgba(244,244,244,0.5 ) 50%,rgba(244,244,244,1   ) 0) center/4.5px 100%,
                      linear-gradient(90deg,rgba(244,244,244,0.25) 50%,rgba(244,244,244,0.75) 0) center/100% 4.5px;
   background-repeat: no-repeat;
   animation        : spinner-d3o0rx 1s infinite steps(12);
 }
 
 .spinner::before,
 .spinner::after {
    content         : "";
    grid-area       : 1/1;
    border-radius   : 50%;
    background      : inherit;
    opacity         : 0.915;
    transform       : rotate(30deg);
 }
 
 .spinner::after {
    opacity         : 0.83;
    transform       : rotate(60deg);
 }
 
 @keyframes spinner-d3o0rx {
    100% {
       transform    : rotate(1turn);
    }
 }