• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красочный эффект для анимации загрузки на CSS (Красивая анимированная перезагрузка сайта с помощью CSS3)
Красочный эффект для анимации загрузки на CSS
Kosten
Воскресенье, 08 Июля 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Пользовательский интерфейс, который объединяет анимацию и Color, что обеспечивают цветную анимацию, а также множество функций утилиты для работы с цветами. Все очень просто, как по настройке, так и по установке, ведь все работает на чистом стиле CSS. Здесь не используют изображения, просто фантазии CSS3. Как всегда, хороший маленький дизайнер, они возвращаются к вполне приемлемому опыту. Хотя мы можем создавать автономные и статические индикаторы выполнения, используя только собственные HTML5 и CSS3, мы можем усилить эффекты.

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



HTML

Код
<div class="animated_progres">
  <div class="koprovides_animations"></div>
  <div class="koprovides_animations"></div>
  <div class="koprovides_animations"></div>
  <div class="koprovides_animations"></div>
</div>


CSS

Код
.animated_progres {
  position: absolute;
  top: 47%;
  left: 47%;
}
.koprovides_animations {
  display: inline-block;
  width: 4px;
  height: 19px;
  border-radius: 5px;
  animation: loading 1s ease-in-out infinite;
}
.koprovides_animations:nth-child(1) {
  background-color: #2477af;
  animation-delay: 0;
}
.koprovides_animations:nth-child(2) {
  background-color: #ad2a1c;
  animation-delay: 0.09s;
}
.koprovides_animations:nth-child(3) {
  background-color: #b79611;
  animation-delay: .18s;
}
.koprovides_animations:nth-child(4) {
  background-color: #1a8647;
  animation-delay: .28s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}


Палитру цвета, здесь вы можете самостоятельно сменить под свой дизайн.

Демонстрация
Прикрепления: 1693852.png (3.3 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красочный эффект для анимации загрузки на CSS (Красивая анимированная перезагрузка сайта с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: