• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Загрузчик для страниц (loader) на HTML и CSS (Создать Preloader веб-сайта при помощи HTML / CSS)
Загрузчик для страниц (loader) на HTML и CSS
Kosten
Среда, 03 Июня 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этой статье подробно узнайте про создание элементов в цветной палитре цвета для загрузки, которая производится при помощи CSS. Здесь не нужно подключать скрипты или библиотеки, что работает на чистом CSS. Также эта анимация отлично смотрится на темном или светлом формате сайта или фона. Ведь загрузчик выполнен в нескольких оттенках цвета, что производит красивую анимацию.



Подключаем шрифты:

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
<div class="agusanulad">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

CSS

Код
.agusanulad span {
        width: 15px;
        height: 60px;
        border-radius: 20px;
        margin-left: 2px;
        animation-duration: 1500ms;
  display: inline-block;
  animation-timing-function: cubic-bezier(1.645, 0.045, 0.355, 1.3);
  animation-iteration-count: infinite;
}

.agusanulad {
  display: block;
  overflow: hidden;
  margin-bottom: 15%;
  font-size: 0;
  overflow: visible;
}

.agusanulad span:nth-child(1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  background-color: #27AAE1;
}

.agusanulad span:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  background-color: #F05A2A;
}

.agusanulad span:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  background-color: #FFCC00;
}

.agusanulad span:nth-child(4) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
  background-color: #27AE60;
}

.agusanulad span:nth-child(5) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
  background-color: #ae2727;
}

.agusanulad span:nth-child(6) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
  background-color: #6b26b7;
}

.agusanulad span {
  -webkit-animation-name: slideBoth;
          animation-name: slideBoth;
  -webkit-animation-duration: 2000ms;
          animation-duration: 2000ms;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@keyframes slideBoth {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

Установка завершена.

Демонстрация
Прикрепления: 9961827.png (11.0 Kb) · simple-responsi.zip (6.3 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Загрузчик для страниц (loader) на HTML и CSS (Создать Preloader веб-сайта при помощи HTML / CSS)
  • Страница 1 из 1
  • 1
Поиск: