Другое

Анимация загрузки страницы в CSS и GIF: назначение, как создать и примеры

Lorem ipsum dolor

Анимация загрузки сайта — это небольшой инструмент, чтобы удержать внимание потенциальных пользователей. Редко какой веб-сайт загружается мгновенно. Обычно на процесс загрузки уходит какое-то время, пока загрузятся скрипты, картинки, стили и др. В момент загрузки всех компонентов страницы она видоизменяется. Этот процесс не всегда очень красивый, поэтому его скрывает анимация загрузки страницы.

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

Анимация загрузки сайта делается при помощи HTML, CSS и немного JavaScript, также иногда применяют GIF или SVG-картинку.

Анимация загрузки сайта

Анимация загрузки на сайте создается довольно просто. Для начала необходимо создать HTML-структуру анимации и разместить ее после открывающегося тега <body>. Потом при помощи CSS ее настраивают таким образом, чтобы она занимала весь экран устройства пользователя. Непосредственно саму анимацию можно сделать:

  • на «чистом» CSS;

  • при помощи анимированной GIF-картинки;

  • при помощи анимированной SVG-картинки.

Анимация загрузки должна перекрывать весь контент основной страницы, пока он загружается, а после его загрузки анимацию нужно скрыть. Показ и скрытие анимации происходят при помощи небольшого JS-скрипта.

Анимация загрузки на «чистом» CSS

Первый этап создания анимации — создание HTML-элемента, который размещается сразу после открывающего тега <body>. Код будет следующим:

<div class="animationLoader">

  <div class="animationLoader__row">

    <div class="animationLoader__item"></div>

    <div class="animationLoader__item"></div>

  </div>

</div>

 

Поясняем код:

  • animationLoader — это контейнер, занимающий весь экран устройства; именно он «прикрывает» содержимое страницы;

  • animationLoader_low и animationLoader_item — это контейнеры, участвующие в создании анимации при помощи CSS.

Второй этап при создании анимации загрузки — придание стилей нашим HTML-элементам. CSS-код будет следующим:

.animationLoader {

  /*фиксируем положение основного контейнера*/

      position: fixed;

  /* расставляем координаты контейнера*/

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

  /* выставляем цвет фона основного контейнера */

      background: #fff;

  /* важно разместить основной блок поверх всех остальных компонентов страницы, поэтому z-index у него должен быть больше, чем у остальных */

      z-index: 1001;

}

 

.animationLoader __row {

      position: relative;

      top: 50%;

      left: 50%;

      width: 80px;

      height: 80px;

      margin-top: -45px;

      margin-left: -45px;

      text-align: center;

      animation: animationLoader -rotate 2s infinite linear;

}

 

.animationLoader __item {

      position: absolute;

      display: inline-block;

      top: 0;

      background-color: grey;

      border-radius: 100%;

      width: 45px;

      height: 45px;

      animation: animationLoader -bounce 2s infinite ease-in-out;

}

 

.animationLoader __item:last-child {

       top: auto;

       bottom: 0;

       animation-delay: -1s;

}

 

@keyframes animationLoader -rotate {

  100% {

    transform: rotate(360deg);

  }

}

 

@keyframes animationLoader -bounce {

 

  0%,

  100% {

    transform: scale(0);

  }

 

  50% {

    transform: scale(1);

  }

}

 

.animation_hiding .animationLoader  {

  transition: 0.3s opacity;

  opacity: 0;

}

 

.animation .animationLoader  {

  display: none;

}

 

Третий этап — добавление небольшого JavaScript-кода, чтобы показывать и скрывать нашу псевдо страницу анимации загрузки. Код будет следующим:

<script>

  window.onload = function () {

    document.body.classList.add('animation_hiding');

    window.setTimeout(function () {

      document.body.classList.add('animation');

      document.body.classList.remove('animation_hiding');

    }, 600);

  }

</script>

 

Анимация загрузки сайта при помощи SVG-картинки

Процесс создания такой анимации загрузки также состоит из 3-х этапов:

  • код HTML;

  • код CSS;

  • код JavaScript.

Только сам код будет слегка изменен.

Код HTML, который добавляется после открывающегося тега <body>:

<div class="animationLoader">

  <svg class="animationLoader__image" role="img" xmlns="http://путь до SVG-картинки на вашем сайте" viewBox="0 0 512 512">

    <path fill="currentColor"

      d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z">

    </path>

  </svg>

</div>

Код CSS:

.animationLoader {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  overflow: hidden;

  background: #e0e0e0;

  z-index: 1001;

}

 

.animationLoader __image {

  position: relative;

  top: 50%;

  left: 50%;

  width: 80px;

  height: 80px;

  margin-top: -45px;

  margin-left: -45px;

  text-align: center;

  animation: animationLoader-rotate 2s infinite linear;

}

 

@keyframes animationLoader-rotate {

  100% {

    transform: rotate(360deg);

  }

}

 

.animation _hiding . animationLoader {

  transition: 0.3s opacity;

  opacity: 0;

}

 

.animation . animationLoader {

  display: none;

}

JavaScript-код будет таким же, как и в первом случае:

<script>

  window.onload = function () {

    document.body.classList.add('animation_hiding');

    window.setTimeout(function () {

      document.body.classList.add('animation');

      document.body.classList.remove('animation_hiding');

    }, 600);

  }

</script>

 

Анимация загрузки страницы при помощи GIF-картинки

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

HTML-код:

<div class="animationLoader">

  <div class="animationLoader__image"></div>

</div>

 

CSS-код:

.animationLoader {

  position: fixed;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  overflow: hidden;

  background: #fff;

  z-index: 1001;

}

 

.animationLoader __image {

  position: relative;

  top: 50%;

  left: 50%;

  width: 74px;

  height: 74px;

  margin-top: -42px;

  margin-left: -42px;

  background: url('animationLoader .gif') no-repeat 50% 50%; /*в ссылке указываете путь до GIF-картинки, расположенной на вашем сайте*/

}

 

.lanimation_hiding . animationLoader {

  transition: 0.3s opacity;

  opacity: 0;

}

 

. animation . animationLoader {

  display: none;

}

 

JavaScript-код будет точно таким же, как и в первых двух случаях.

Заключение

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

Схожие статьи

KDevelop для Windows, сфера ее применения и главные особенности
Другое

KDevelop для Windows, сфера ее применения и главные особенности

Как зарабатывать на программировании и что для этого нужно знать
Другое

Как зарабатывать на программировании и что для этого нужно знать

Что за программа Google Files Go, какие у нее функции и нужны ли Root-права?
Другое

Что за программа Google Files Go, какие у нее функции и нужны ли Root-права?

Jupyter notebook: определение, правила установки и запуска на Windows и Ubuntu
Другое

Jupyter notebook: определение, правила установки и запуска на Windows и Ubuntu