ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прелоадер для сайта с анимацией на CSS

Прелоадер для сайта с анимацией на CSS

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

В сети интернет присутствует множество готовых решений, но чтоб на чистом стиле, то такие решение в меньшинстве. Здесь мы наблюдаем круг в разных оттенках цвета, где по центру его написана ЗАГРУЗКА, что изначально говорит, это можно применить и под это направление. Это при клике вы не будете выжидать заданное время, а появится данный дизайн, который оповестит, что производится загрузка элемента или файлов.

Установка:

HTML

Код

<div class="aloaderes_na_chistom">
<span>Загрузка...</span>
</div>

CSS

Код

.aloaderes_na_chistom {
  width: 250px;
  height: 250px;
  font-size: 25px;
  box-sizing: border-box;
  border-top: 0.3em solid hotpink;
  border-radius: 50%;
  position: relative;
  animation: rotating 2s ease-in-out infinite;
  --direction: 1;
}

.aloaderes_na_chistom::before,
.aloaderes_na_chistom::after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  box-sizing: border-box;
  top: -0.2em;
}

.aloaderes_na_chistom::before {
  border-top: 0.3em solid dodgerblue;
  transform: rotate(120deg);
}

.aloaderes_na_chistom::after {
  border-top: 0.3em solid gold;
  transform: rotate(240deg);
}

.aloaderes_na_chistom span {
  position: absolute;
  color: white;
  width: inherit;
  height: inherit;
  text-align: center;
  line-height: 10em;
  font-family: sans-serif;
  animation: rotating 2s linear infinite;
  --direction: -1;
}

@keyframes rotating {
  50% {
  transform: rotate(calc(180deg * var(--direction)));
  }

  100% {
  transform: rotate(calc(360deg * var(--direction)));
  }
}

Здесь задействовали дизайн и текстуру, что можно сказать, это анимированный текстовый прелоадер, который выстроен при участие только CSS.

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

28 Июля 2021 Загрузок: 4 Просмотров: 1142 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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