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

Эффект для анимации загрузки на CSS

В материале разберем тему, это как можно создать анимацию загрузчика, где задействуем чистый HTML и CSS, где идет великолепный вид под анимацией. Если рассматривать загрузчик, который основном появляется при переходе на другую страницу, то это эффект анимации, где видите на экране. Анимации preloaders задействована для развлечения посетителей, в то время, когда серверные операции заканчивают обработку.

Теперь вы самостоятельно научитесь создавать HTML CSS Gear Preloade, которые вращаются непрерывно, как работающий двигатель. Но только в тот момент, когда вы наблюдаете, при полной загрузки он автоматически исчезает и появляется полноценная страница. Изначально создан на 3 шестеренки, которые имеют разные оттенки цвета и форму. Если первый элемент идет всех больше, то второй однозначно меньше первого винтика, а следующий меньше всех остальных.

Также присутствует текст "Loading", который предназначен для показа что это анимация загрузки, что находится внизу, и по мере необходимости, его можно переписать на свое значение. Для создания постоянно движущегося эффекта я использовал команду CSS @keyframe, а также основу HTML для места под установку и безусловно CSS.

Так выглядит при проверки на работоспособность:

Эффект анимации загрузки страницы на чистом css

Установочный процесс:

HTML

Код

<div class='downloading'>
  <div class='downloading_cogs'>
  <div class='dekopesam'>
  <div class='accusation'></div>
  <div class='accusation'></div>
  <div class='accusation'></div>
  <div class='firstHole'></div>
  </div>
  <div class='bekopesam'>
  <div class='secondPart'></div>
  <div class='secondPart'></div>
  <div class='secondPart'></div>
  <div class='secondHole'></div>
  </div>
  <div class='cekopesam'>
  <div class='thirdPart'></div>
  <div class='thirdPart'></div>
  <div class='thirdPart'></div>
  <div class='thirdHole'></div>
  </div>
  <p>loading...</p>
  </div>
</div>

CSS

Код

body p {
  margin: 0 auto;
  font-size: 18px;
}
body .downloading {
  height: 100%;
  margin: auto;
  width: 400px;
}

body .downloading_cogs {
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .dekopesam {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
  animation: rotate 10s infinite linear;
}
body .dekopesam div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
body .dekopesam div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
body .dekopesam div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
body .dekopesam div.accusation {
  width: 100px;
  border-radius: 15px;
  position: absolute;
  height: 100px;
  background: #ff4242;
}
body .dekopesam div.firstHole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .bekopesam {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
  transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
  transform-origin: 40px 40px;
  animation: rotate_left 10s .1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
body .bekopesam div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
body .bekopesam div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
body .bekopesam div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
body .bekopesam div.secondPart {
  width: 80px;
  border-radius: 10px;
  position: absolute;
  height: 80px;
  background: #208bfd;
}
body .bekopesam div.secondHole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
body .cekopesam {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
  transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s .4s infinite linear;
  animation: rotate_left 10.2s .4s infinite linear;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
body .cekopesam div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
body .cekopesam div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
body .cekopesam div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
body .cekopesam div.thirdPart {
  width: 60px;
  border-radius: 8px;
  position: absolute;
  height: 60px;
  background: #212121;
}
body .cekopesam div.thirdHole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Animations */
@-webkit-keyframes rotate {
  from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
  -webkit-transform: rotate(16deg);
  transform: rotate(16deg);
  }
  to {
  -webkit-transform: rotate(376deg);
  transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
  -webkit-transform: rotate(16deg);
  transform: rotate(16deg);
  }
  to {
  -webkit-transform: rotate(376deg);
  transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  }
  to {
  -webkit-transform: rotate(364deg);
  transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  }
  to {
  -webkit-transform: rotate(364deg);
  transform: rotate(364deg);
  }
}

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

Где также можете изменить цвет и скорость после некоторых изменений. Все это предусмотрено в прикрепленном CSS, где задаете скорость или меняете палитру цвета под свой основной стиль сайта.

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

Предварительный просмотр Gear Preloader

Посмотрите это видео, чтобы понять, как выглядит эта анимация загрузки.

PS - используя CSS, все элементы размещены в нужном месте, как вы можете видеть на превью. Для создания формы шестерни использовались три прямоугольника, которые основаны на 3 делениях в каждой секции, где делители идут на 30, 60 и 90 градусов, с последующим использованием border-radius для создания закругление углов на элементах.

27 Декабря 2019 Загрузок: 3 Просмотров: 1652 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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