SM - Стильные решения для вашего сайта

Танец разноцветных точек: гипнотическая анимация загрузки

Разноцветные движущиеся точки: анимация загрузки на CSS

Разноцветные движущиеся точки: анимация загрузки на CSS

Превратите ожидание загрузки в захватывающий визуальный опыт с анимацией Moving Dot! Эта оригинальная анимация с разноцветными точками, движущимися друг за другом слева направо, выглядит стильно и современно.

Moving Dot — это полностью CSS-реализованная анимация, что делает её лёгкой и быстрой. Разноцветные точки, перемещающиеся по экрану в синхронном движении, создают эффект динамики и живости.

Особенности анимации:

  • Многоцветный дизайн: яркие точки оживляют процесс ожидания.
  • Плавное движение: реалистичная анимация привлекает внимание.
  • Адаптивность: отлично работает на экранах любого размера.
  • Без использования jаvascript: только CSS, что экономит ресурсы сайта.

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

See the Pen Moving Dot by Arlina Code (@arlinacode) on CodePen.

        
HTML

<div id='preloader'>
<div class='spinner'>
  <div class='loader'>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
  </div>
</div>
</div>

        
CSS

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{-webkit-animation-name:loader;animation-name:loader;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;-webkit-animation-delay:0.5s;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;-webkit-animation-delay:0.4s;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;-webkit-animation-delay:0.3s;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;-webkit-animation-delay:0.2s;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;-webkit-animation-delay:0.1s;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;-webkit-animation-delay:0s;animation-delay:0s}
@-webkit-keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}


moving-dot.zip
0 5.66 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU