• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание анимации для Loader на CSS (Как создать анимационный загрузчик страниц)
Создание анимации для Loader на CSS
Kosten
Дата: Пятница, 2019-01-18, 22:46 | Сообщение 1
Администраторы
Сообщений:19882
Награды: 56


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

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

В нашем случай это круг, который начнет крутится на темном фоне, так как он идет в светлой гамме.



HTML

Код
<div class="gavorable-consideraton">Loading...</div>

CSS

Код
.gavorable-consideraton {
  margin: 5em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(249, 249, 249, 0.2);
  border-right: 1.5em solid rgba(249, 249, 249, 0.2);
  border-bottom: 1.5em solid rgba(249, 249, 249, 0.2);
  border-left: 1.5em solid #efeeee;
  -webkit-animation: load8 1.5s infinite linear;
  animation: load8 1.5s infinite linear;
}
.gavorable-consideraton,
.gavorable-consideraton:after {
  border-radius: 100%;
  width: 8em;
  height: 8em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


Что по стилистике и оформлению, то все выставляем в прикрепленных стилях.

Демонстрация
Прикрепления: 0474056.png(8.3 Kb) · loader.zip(1.6 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание анимации для Loader на CSS (Как создать анимационный загрузчик страниц)
  • Страница 1 из 1
  • 1
Поиск: