• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимированный загрузчик на CSS3 (Как сделать эффект предварительной загрузки страниц и файлов)
Создать анимированный загрузчик на CSS3
Kosten
Дата: Четверг, 2020-04-30, 19:48 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29264
Награды: 62


В этой статье узнаете, как можно просто создать красивый эффект предварительной загрузки страницы с сайте или при загрузки файлов. Здесь задействуем стилистику, где будет использоваться CSS3 анимация, так как идет непрерывная анимация на предварительную загрузку страницы при помощи CSS.

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



HTML

Код
<div id="kagucik-sanitsa">
  <div id="asposo-bleniye"></div>
</div>

CSS

Код
#kagucik-sanitsa {
  width: 100%;
  height: 100vh;
  position: fixed;
  background: #151515;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}

#asposo-bleniye {
    width: 30px;
    height: 30px;
    border-right: 2px solid #d4d4d4;
    border-left: 2px solid rgba(177, 177, 177, 0.44);
    border-top: 2px solid rgba(177, 177, 177, 0.44);
    border-bottom: 2px solid rgba(177, 177, 177, 0.44);
    border-radius: 50%;
    opacity: .7;
    animation: spin 1s linear infinite;
}

@keyframes spin {
  
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
  
}

На этом вся установка:

Демонстрация
Прикрепления: 9190939.jpg(15.8 Kb) · loader-css.zip(2.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать анимированный загрузчик на CSS3 (Как сделать эффект предварительной загрузки страниц и файлов)
  • Страница 1 из 1
  • 1
Поиск: