.loader,.loader:before,.loader:after{
    top:0;
    bottom:0;
    left:0;
    right:0; 
    content:"";
    position:absolute;
    border-radius:50%;
  }

  .loader{
    width:100px;
    height:100px;
    margin:auto;
    animation:spin 6s linear infinite;
  }
  
  @keyframes spin{
    100%{transform:rotate(360deg);filter:hue-rotate(360deg)}
  }
  
  .loader:before{
    border:5px solid #666;
    border-bottom:5px solid orange;
    border-left:5px solid orange;
    animation:spin1 2s linear infinite;
  }
  
  .loader:after{
    border:5px solid #666;
    border-top:5px solid transparent;
    border-right:5px solid transparent;
    animation:spin2 2s linear infinite;
  }
  
  @keyframes spin1{
    20%{transform:rotate(150deg)}
    40%{transform:rotate(300deg)}
    80%{transform:rotate(300deg)}
    100%{transform:rotate(360deg)}
  }
  
  @keyframes spin2{
    0%{transform:rotate(-30deg)}
    20%{transform:rotate(-30deg);
        border-color:transparent transparent #666 #666}
    21%{border-color:orange orange transparent transparent}
    40%{transform:rotate(-30deg)}
    60%{transform:rotate(120deg);
        border-color:orange orange transparent transparent}
    61%{border-color:transparent transparent #666 #666}
    80%{transform:rotate(270deg)}
    100%{transform:rotate(330deg);}
  }