ZorNet.Ru — сайт для вебмастера » HTML и CSS » Цветная полоса загрузки CSS анимации

Цветная полоса загрузки CSS анимации

Это цветная полоса анимации загрузки создана на чистом CSS, так как Progress Bar можно поставить на многие функций, где применяется загрузка. Вероятно не раз вам проходилось встречать или видели этот эффект на многих устройствах. Кроме того, многие сайты используют этот тип прелоадера на экране загрузки, которые на темном или светилом формате выглядит великолепно, так как цветовую гамму можно самостоятельно подвести под основной дизайн.

Если у вас есть портфолио или другие типы веб-сайтов для презентаций, то эта полоса загрузки будет довольно крутой на вашем сайте. Все отлично работает без привлечения JavaScript, так как изначально сделано на чистом CSS, хотя здесь имеет ограничение в 200-300 команд или свойств, это качается CSS. Но всегда помните одну вещь, нет предела для творчества, есть также люди, которые могут сделать любой макет в CSS.

Это очень короткая и простая форма, которая полностью встроенная в CSS и HTML. Как известно HTML, это структура любой веб-страницы, где без него вы не сможете создать, к примеру сайт и даже простенькую страницу. Чтоб полностью понять, то для этого представлен полный исходный код. Просто вам нужно создать 2 файла для полноценной работоспособности загрузчика, где один для HTML-файла и другой для CSS-файла.

Под темный формат, не меняя гамму цвета:

Анимированные полосы загрузки с использованием CSS

Под светлый формат с аналогичной палитрой цвета:

Простая CSS анимация с помощью @keyframes

Давайте посмотрим предварительный просмотр этой панели загрузки:

Приступаем к установке:

HTML

Код

<div class="nendoveb-kubscupon">
  <h3>Загрузка, пожалуйста подождите.</h3>
  <div class="kacekagen-protsem">
  <div class="akemobvous"></div>
  </div>
</div>

CSS

Код

.nendoveb-kubscupon {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:350px;
  height:100px;
}
.nendoveb-kubscupon h3 {
  color:rgba(100,100,100,0.9);
}
.nendoveb-kubscupon .kacekagen-protsem {
  width: 0%;
  height: 5px;
  background: linear-gradient(to right,rgb(51, 253, 93),rgb(71, 185, 236),rgb(42, 147, 245),rgb(41, 168, 222),rgb(120, 56, 179),rgb(234, 34, 70));
  margin-top: 10px;
  background-size: 353px 5px;
  border-radius: 12px;
  animation: loading 6s ease-in-out forwards;
}

.nendoveb-kubscupon .akemobvous {
  width: 100%;
  height: 35px;
  background: linear-gradient(to bottom,rgba(185, 173, 173, 0.17),rgba(97, 91, 91, 0.1),rgba(53, 51, 51, 0));
  transform: skew(45deg) translate(15px,5px);
}
@keyframes loading {
  to {
  width:100%;
  }
}

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

Свойство CSS, которые используются в индикаторе и загрузки

Давайте поговорим об форме анимационной панели, которая идет под загрузку. Здесь создан эффект с помощью animation свойства CSS, где используется @keyframe свойство CSS для анимации данного индикатора. По сути здесь задействовано 2 div, где первый идет для индикатора выполнения, а вот второй для эффекта тени.

В @keyframe собственности поставлена width:100% команда, где предназначена для присвоения 100% ширины элементам div, которая ранее создана под ширину. Теперь запустите анимацию ключевого кадра с помощью 6s ease-in-out forwards команды, и увидите индикатор выполнения для анимации ширину от 0% до 100% за 6 с. Вот в чем заключается секрет этого анимационного эффекта панели загрузки.

Демонстрация

09 Июля 2019 Загрузок: 2 Просмотров: 6152 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0