Создание анимированной preloader иконки

Оглавление

• Пишем разметку
• Стилизация разметки
• Задаем анимацию
• Результат

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

Вообще, прелоадеры бывают разные. На одних сайтах прелоадеры показывают процент готовности загрузки страницы, на других дизайнеры просто вставляют gif или svg иконки. В этой статье, я покажу вам как создать анимированную иконку прелоадера, с помощью HTML, CSS и одной картинки.

Пишем разметку

Для начала, пропишем разметку прелоадера:

<div class="spin-wrapper">
    <div class="circle">
      <div class="inner"></div>
  </div>
    <div class="circle">
      <div class="inner"></div>
  </div>
    <div class="circle">
      <div class="inner"></div>
  </div>
    <div class="circle">
      <div class="inner"></div>
  </div>
    <img src="путь к картинке" alt="Изображение прелоадера" title="Изображение прелоадера">
</div>

По порядку:

1. spin-wrapper — главная обертка для всего прелоадера.
2. circle — обертка для кружков.
3. inner — кружок, который мы впоследствии будем анимировать.
4. img — картинка, которую мы поместим внутрь анимированных кружков. Опциональный элемент.

Стилизация разметки

Теперь стилизируем разметку:

/* Центрируем обертку прелоадера по центру страницы */
.spin-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Немного застилизуем картинку */
.spin-wrapper img {
  max-width: 50px;
  margin: 20px;
}

/* Растягиваем обертку для кружков */
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Внутри обертки, задаем главную стилизация кружков */
.circle .inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 100%;
  border: 5px solid rgba(120, 17, 88, 0.7);
  box-shadow: inset 0px 0px 10px rgba(0, 17, 88, 0.15);
  border-right: none;
  border-top: none;
}

Задаем анимацию

Для анимации кружков, мы конечно же будем использовать «@keyframes». Ключевые кадры имеют довольно неплохую поддержку всех современных браузеров. Вообще что ключевые кадры, что JavaScipt, может изрядно нагрузить браузер или компьютер пользователя, но этого стоит опасаться только при чрезмерном количестве анимаций на сайте. В нашем же случае, нагрузки опасаться не стоит.

Давайте напишем анимацию:

/* Анимация будет начинаться с позиции 0deg и заканчиваться на 360deg */
@keyframes circle-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Задаем параметры анимации первого кружка */
.circle:nth-of-type(0) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
/* Применяем к нему анимацию, которую создали выше */
.circle:nth-of-type(0) .inner {
  -webkit-animation: circle-spin 2s infinite linear;
          animation: circle-spin 2s infinite linear;
}

/* По аналогичной схеме, прописываем параметры и для остальных трех кружков */
.circle:nth-of-type(1) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
.circle:nth-of-type(1) .inner {
  -webkit-animation: circle-spin 5s infinite linear;
          animation: circle-spin 5s infinite linear;
}

.circle:nth-of-type(2) {
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}
.circle:nth-of-type(2) .inner {
  -webkit-animation: circle-spin 2s infinite linear;
          animation: circle-spin 2s infinite linear;
}

.circle:nth-of-type(3) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}
.circle:nth-of-type(3) .inner {
  -webkit-animation: circle-spin 2s infinite linear;
          animation: circle-spin 2s infinite linear;
}

.circle:nth-of-type(4) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.circle:nth-of-type(4) .inner {
  -webkit-animation: circle-spin 1.5s infinite linear;
          animation: circle-spin 1.5s infinite linear;
}

Вы можете поиграться со значениями скорости анимации и градусами, на которые кружки смещаются, создавая тем самым эффект анимации.

Результат

Весь код вы сможете найти в примере ниже.

Смотреть пример Создание анимированной preloader иконки от webinmind.ru (@webinmind).