• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Бесконечный загрузчик "loader" с помощью CSS (Простая и красивая CSS анимация с помощью @keyframes)
Бесконечный загрузчик "loader" с помощью CSS
Kosten
Дата: Вторник, 2019-05-21, 20:46 | Сообщение 1
Администраторы
Сообщений:22439
Награды: 56


Отличное решение для загрузчика, которое выполнена в оригинальном формате, где производится зеркальное отражение, что кардинально отличается от стандартного. Плюс в том, что это отражение должно быть на темном фоне, или переписать цветовую гамму под свой дизайн.

Он работает путем чтения стилистики, которая закреплена за основным элементом. Этот подход, также известный как прогрессивное улучшение для просмотра загрузки, где предлагает вашим пользователям лучший пользовательский опыт, что приводит к увеличению времени посещения и увеличению числа просмотров страниц.



HTML

Код
<div class="keloades-mugedovas">
    <div class="vademugadekog">
    <div class="kasupvedankud"></div>
    <div class="kasupvedankud"></div>
  </div>
  
  <div id="vademugadekog2" class="vademugadekog">
    <div class="kasupvedankud"></div>
    <div class="kasupvedankud"></div>
  </div>
  
  <div id="vademugadekog3" class="vademugadekog">
    <div class="kasupvedankud"></div>
    <div class="kasupvedankud"></div>
  </div>
</div>

CSS

Код
.keloades-mugedovas {
  width: 148px;
  height: 100px;
  position: absolute;
  margin: -50px 0 0 -74px;
  left: 50%;
  top: 60%;
}

.vademugadekog {
  width: 148px;
  height: 100px;
  top: 0;
  left: 0;
  position: absolute;
}
.vademugadekog:after {
  content: "";
  top: auto;
  position: absolute;
  display: block;
  animation: shadow 1.2s infinite linear;
  -moz-animation: shadow 1.2s infinite linear;
  bottom: 0em;
  left: 0;
  height: .25em;
  width: 1em;
  border-radius: 50%;
  background-color: #f5b900;
  opacity: 0.3;
}

.kasupvedankud,
.kasupvedankud:last-child {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: kasupvedankudcoaster 1.2s infinite linear;
  -webkit-transform: rotate(135deg);
  -moz-animation: kasupvedankudcoaster 1.2s infinite linear;
  -moz-transform: rotate(135deg);
  animation: kasupvedankudcoaster 1.2s infinite linear;
  transform: rotate(135deg);
}

.kasupvedankud:last-child {
  left: auto;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -webkit-animation: kasupvedankudcoaster2 1.2s infinite linear;
  -moz-transform: rotate(-45deg);
  -moz-animation: kasupvedankudcoaster2 1.2s infinite linear;
  transform: rotate(-45deg);
  animation: kasupvedankudcoaster2 1.2s infinite linear;
}

.kasupvedankud:before,
.kasupvedankud:last-child:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #f5b900;
  border-radius: 50%;
}

@-webkit-keyframes kasupvedankudcoaster {
  0% {
    -webkit-transform: rotate(135deg);
  }
  8% {
    -webkit-transform: rotate(240deg);
  }
  20% {
    -webkit-transform: rotate(300deg);
  }
  40% {
    -webkit-transform: rotate(380deg);
  }
  45% {
    -webkit-transform: rotate(440deg);
  }
  50% {
    -webkit-transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    -webkit-transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(495deg);
    opacity: 0;
  }
}
@-webkit-keyframes kasupvedankudcoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
  }
  58% {
    -webkit-transform: rotate(-160deg);
  }
  70% {
    -webkit-transform: rotate(-240deg);
  }
  80% {
    -webkit-transform: rotate(-300deg);
  }
  90% {
    -webkit-transform: rotate(-340deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
  }
}
@-webkit-keyframes shadow {
  0% {
    opacity: 0.3;
    -webkit-transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    -webkit-transform: translateX(30px) scale(2, 2);
  }
  13% {
    -webkit-transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    -webkit-transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    -webkit-transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    -webkit-transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    -webkit-transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    -webkit-transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    -webkit-transform: translateX(60px);
    opacity: 0.3;
  }
}
/* Moz */
@-moz-keyframes kasupvedankudcoaster {
  0% {
    -moz-transform: rotate(135deg);
  }
  8% {
    -moz-transform: rotate(240deg);
  }
  20% {
    -moz-transform: rotate(300deg);
  }
  40% {
    -moz-transform: rotate(380deg);
  }
  45% {
    -moz-transform: rotate(440deg);
  }
  50% {
    -moz-transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    -moz-transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    -moz-transform: rotate(495deg);
    opacity: 0;
  }
}
@-moz-keyframes kasupvedankudcoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    -moz-transform: rotate(-45deg);
  }
  58% {
    -moz-transform: rotate(-160deg);
  }
  70% {
    -moz-transform: rotate(-240deg);
  }
  80% {
    -moz-transform: rotate(-300deg);
  }
  90% {
    -moz-transform: rotate(-340deg);
  }
  100% {
    -moz-transform: rotate(-405deg);
  }
}
@-moz-keyframes shadow {
  0% {
    opacity: .3;
    -moz-transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    -moz-transform: translateX(30px) scale(2, 2);
  }
  13% {
    -moz-transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    -moz-transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    -moz-transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    -moz-transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    -moz-transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    -moz-transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    -moz-transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    -moz-transform: translateX(60px);
    opacity: 0.3;
  }
}
/* No-prefix */
@keyframes kasupvedankudcoaster {
  0% {
    transform: rotate(135deg);
  }
  8% {
    transform: rotate(240deg);
  }
  20% {
    transform: rotate(300deg);
  }
  40% {
    transform: rotate(380deg);
  }
  45% {
    transform: rotate(440deg);
  }
  50% {
    transform: rotate(495deg);
    opacity: 1;
  }
  50.1% {
    transform: rotate(495deg);
    opacity: 0;
  }
  100% {
    transform: rotate(495deg);
    opacity: 0;
  }
}
@keyframes kasupvedankudcoaster2 {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: rotate(-45deg);
  }
  58% {
    transform: rotate(-160deg);
  }
  70% {
    transform: rotate(-240deg);
  }
  80% {
    transform: rotate(-300deg);
  }
  90% {
    transform: rotate(-340deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes shadow {
  0% {
    opacity: .3;
    transform: translateX(65px) scale(0.5, 0.5);
  }
  8% {
    transform: translateX(30px) scale(2, 2);
  }
  13% {
    transform: translateX(0px) scale(1.3, 1.3);
  }
  30% {
    transform: translateX(-15px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  50% {
    transform: translateX(60px) scale(1.2, 1.2);
    opacity: 0.3;
  }
  60% {
    transform: translateX(130px) scale(2, 2);
    opacity: 0.05;
  }
  65% {
    transform: translateX(145px) scale(1.2, 1.2);
  }
  80% {
    transform: translateX(120px) scale(0.5, 0.5);
    opacity: 0.1;
  }
  90% {
    transform: translateX(80px) scale(0.8, 0.8);
  }
  100% {
    transform: translateX(60px);
    opacity: 0.3;
  }
}
#vademugadekog2:after {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
#vademugadekog2 .kasupvedankud {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

#vademugadekog3:after {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#vademugadekog3 .kasupvedankud {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

На этом все!

Демонстрация
Прикрепления: 6073680.png(5.4 Kb) · infinite-loader.zip(2.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Бесконечный загрузчик "loader" с помощью CSS (Простая и красивая CSS анимация с помощью @keyframes)
  • Страница 1 из 1
  • 1
Поиск: