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

Простые анимационные загрузчики на CSS

Здесь представлено 9 совершенно разных типов анимации, которые по своей структуре простые и удобные в использовании загрузчиков на чистом CSS. Улучшите взаимодействие с пользователем и производительность веб-сайта с помощью этих девять простых и удобных в использовании загрузчиков CSS. Безусловно вы можете в сети интернет найти разных по структуре и работе загрузчиков, их реально просто множество, которые также выполнены на чистом стиле.

Но данный материал, что идет виде загрузки отличается тем, что здесь не нужны скрипты, все выполнено на стилистике, где по номеру можно узнать, какие стиле закреплены за данной формой загрузки. Хотя эти загрузчики могут быть не такими эффективными с точки зрения времени загрузки, как некоторые более продвинутые варианты, они требуют очень мало технических знаний и значительно упрощают процесс добавления контента на ваш веб-сайт.

В частности данные на CSS — это легкие и простые в реализации решения, которые могут добавить визуальный интерес и функциональность веб-сайту. В этом сообщении блога мы рассмотрим 9 различных типов простых и удобных в использовании загрузчиков CSS, которые помогут вам оптимизировать ваш веб-сайт и улучшить взаимодействие с пользователем. Чтоб было понятно, здесь только представлен материал загрузчика, если его ставить на сайт, то придётся его устанавливать под каждую площадку, где будет ваш сайт или блог.

Красивые загрузчики CSS с красивой анимацией

Установка:

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

HTML

Чтобы начать, нам сначала нужно создать базовый HTML-файл, где этот файл мы добавим основную структуру для наших различных загрузчиков CSS.

Код

CSS

Код

.kisnules {
  --color: white;
  --size-mid: 6vmin;
  --size-dot: 1.5vmin;
  --size-bar: 0.4vmin;
  --size-square: 3vmin;

  position: relative;
  width: 50%;
  display: grid;
  place-items: center;
}

.kisnules::before,
.kisnules::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
}

/**
  kisnules udes-1
**/
.kisnules.udes-1::before {
  width: var(--size-mid);
  height: var(--size-mid);
  border: 4px solid var(--color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: kisnules-1 1s linear infinite;
}

.kisnules.udes-1::after {
  width: calc(var(--size-mid) - 2px);
  height: calc(var(--size-mid) - 2px);
  border: 2px solid transparent;
  border-top-color: var(--color);
  border-radius: 50%;
  animation: kisnules-1 0.6s linear reverse infinite;
}

@keyframes kisnules-1 {
  100% {
  transform: rotate(1turn);
  }
}

/**
  kisnules udes-1
**/
.kisnules.udes-1::before,
.kisnules.udes-1::after {
  width: var(--size-dot);
  height: var(--size-dot);
  background-color: var(--color);
  border-radius: 50%;
  opacity: 0;
  animation: kisnules-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}

.kisnules.udes-1::after {
  animation-delay: 0.3s;
}

@keyframes kisnules-2 {
  0%, 80%, 100% {
  opacity: 0;
  }

  33% {
  opacity: 1;
  }

  0%, 100% {
  transform: translateX(-4vmin);
  }

  90% {
  transform: translateX(4vmin);
  }
}

/**
  kisnules udes-3
**/
.kisnules.udes-3::before,
.kisnules.udes-3::after {
  width: var(--size-dot);
  height: var(--size-dot);
  background-color: var(--color);
  border-radius: 50%;
  animation: kisnules-3 1.2s ease-in-out infinite;
}

.kisnules.udes-3::before {
  left: calc(50% - 1.6vmin - var(--size-dot));
}

.kisnules.udes-3::after {
  left: calc(50% + 1.6vmin);
  animation-delay: -0.4s;
}

@keyframes kisnules-3 {
  0%, 100% {
  transform: translateY(-2.6vmin);
  }

  44% {
  transform: translateY(2.6vmin);
  }
}

/**
  kisnules udes-4
**/
.kisnules.udes-4::before {
  height: var(--size-bar);
  width: 6vmin;
  background-color: var(--color);
  animation: kisnules-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

@keyframes kisnules-4 {
  0%, 44%, 88.1%, 100% {
  transform-origin: left;
  }

  0%, 100%, 88% {
  transform: scaleX(0);
  }

  44.1%, 88% {
  transform-origin: right;
  }

  33%, 44% {
  transform: scaleX(1);
  }
}

/**
  kisnules udes-5
**/
.kisnules.udes-5::before,
.kisnules.udes-5::after {
  height: 3vmin;
  width: var(--size-bar);
  background-color: var(--color);
  animation: kisnules-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}

.kisnules.udes-5::before {
  left: calc(50% - 1vmin);
  top: calc(50% - 3vmin);
}

.kisnules.udes-5::after {
  left: calc(50% + 1vmin);
  top: calc(50% - 1vmin);
  animation-delay: 0.2s;
}

@keyframes kisnules-5 {
  0%, 88%, 100% {
  opacity: 0;
  }

  0% {
  transform: translateY(-6vmin);
  }

  33% {
  opacity: 1;
  }

  33%, 88% {
  transform: translateY(3vmin);
  }
}

/**
  kisnules udes-6
**/
.kisnules.udes-6::before {
  width: var(--size-square);
  height: var(--size-square);
  background-color: var(--color);
  top: calc(50% - var(--size-square));
  left: calc(50% - var(--size-square));
  animation: kisnules-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes kisnules-6 {
  0%, 100% {
  transform: none;
  }

  25% {
  transform: translateX(100%);
  }

  50% {
  transform: translateX(100%) translateY(100%);
  }

  75% {
  transform: translateY(100%);
  }
}

/**
  kisnules udes-7
**/
.kisnules.udes-7::before,
.kisnules.udes-7::after {
  width: var(--size-square);
  height: var(--size-square);
  background-color: var(--color);
}

.kisnules.udes-7::before {
  top: calc(50% - var(--size-square));
  left: calc(50% - var(--size-square));
  animation: kisnules-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

.kisnules.udes-7::after {
  top: 50%;
  left: 50%;
  animation: kisnules-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes kisnules-7 {
  0%, 100% {
  transform: none;
  }

  25% {
  transform: translateX(-100%);
  }

  50% {
  transform: translateX(-100%) translateY(-100%);
  }

  75% {
  transform: translateY(-100%);
  }
}

/**
  kisnules udes-8
**/
.kisnules.udes-8::before,
.kisnules.udes-8::after {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background-color: var(--color);
}

.kisnules.udes-8::before {
  top: calc(50% + 4vmin);
  animation: kisnules-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
}

.kisnules.udes-8::after {
  opacity: 0;
  top: calc(50% - 2vmin);
  animation: kisnules-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
}

@keyframes kisnules-8-1 {
  0%, 55%, 100% {
  opacity: 0;
  }

  0% {
  transform: scale(0.2);
  }

  22% {
  opacity: 1;
  }

  33%, 55% {
  transform: scale(1) translateY(-6vmin);
  }
}

@keyframes kisnules-8-2 {
  0%, 100% {
  opacity: 0;
  }

  33% {
  opacity: 0.3;
  }

  0% {
  transform: scale(0);
  }

  100% {
  transform: scale(4);
  }
}

/**
  kisnules udes-9
**/
.kisnules.udes-9::before,
.kisnules.udes-9::after {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background-color: var(--color);
  animation: kisnules-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
}

.kisnules.udes-9::before {
  left: calc(50% - var(--size-dot) - 1.6vmin);
}

.kisnules.udes-9::after {
  left: calc(50% + 1.6vmin);
  animation-delay: 0.12s;
}

@keyframes kisnules-9 {
  0%, 100% {
  opacity: 0;
  }

  0% {
  transform: translate(-4vmin, -4vmin);
  }

  66% {
  opacity: 1;
  }

  66%, 100% {
  transform: none;
  }
}

.koneydesa {
  display: grid;
  grid-template-columns: repeat(3, 18vmin);
  grid-template-rows: repeat(3, 18vmin);
  grid-gap: 1vmin;
}

.item {
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  border-radius: 4px;
  transition: opacity 0.4s ease;
}

.koneydesa:hover .item {
  opacity: 0.3;
}

.koneydesa:hover .item:hover {
  opacity: 1;
}

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

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

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

07 Ноября 2023 Загрузок: 2 Просмотров: 573 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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