Бесплатная коллекция анимированных CSS спиннеров

Набор анимированных иконок загрузки на чистом CSS, выбираем нужный, копипастим и наслаждаемся.

.single5 {
      height: 50px;
      width: 50px;
      background-color: pink;
      -webkit-animation: single5 5s infinite linear;
      animation: single5 5s infinite linear;
   }
   
   @-webkit-keyframes single5 {
      0% { 
         -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
         background-color: #F4D03F;
      }
      25% { 
         -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
         background-color: #52B3D9;
      }
      50% { 
         -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
         background-color: #EC644B;
      }
      75% { 
         -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
         background-color: #68C3A3;
      }
      100% { 
         -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
         background-color: #F4D03F;
      }
   }
   
   @keyframes single5 {
      0% { 
         transform: perspective(180px) rotateX(0deg) rotateY(0deg);
         -webkit-transform: perspective(180px) rotateX(0deg) rotateY(0deg);
         background-color: #F4D03F;
      }
      25% { 
         transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
         -webkit-transform: perspective(180px) rotateX(-180.1deg) rotateY(0deg);
         background-color: #52B3D9;
      }
      50% { 
         transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
         -webkit-transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
         background-color: #EC644B;
      }
      75% { 
         transform: perspective(180px) rotateX(-180deg) rotateY(179.9deg);
         -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(179.9deg);
         background-color: #68C3A3;
      }
      100% { 
         transform: perspective(180px) rotateX(0deg) rotateY(360deg);
         -webkit-transform: perspective(180px) rotateX(-360deg) rotateY(360deg);
         background-color: #F4D03F;
      }
   }

<div class="single5"></div>

Остальные примеры на сайте разработчика. Перейти