Всем привет! В этом материале рассмотрим, как установить иконки загрузки на чистом CSS себе на сайт .

Как установить иконки загрузки на чистом CSS.

Всем привет! В этом материале рассмотрим, как установить иконки загрузки на чистом CSS себе на сайт.

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

Как установить понравившуюся вам иконку?

Для того, чтобы установить понравившуюся вам иконку, сначала их нужно скачать. Для этого вы можете использовать Bower:

bower install loaders.css

Или NPM:

npm i --save-dev loaders.css

Использование

Стандартное

  • Подключите loaders.min.css
  • Вставьте подходящее число div'ов в этот элемент
  • Создайте элемент и добавьте класс анимации(например, <div class="loader-inner ball-pulse"></div>

JQuery(необязательно)

  • Подключите loaders.min.css, jquery и loaders.css.js
  • Создайте элемент и добавьте класс анимации
  • loaders.js – это маленький помощник для вставки нужного количества div'ов для каждой анимации
  • Чтобы проинициализировать загрузчики, которые были добавлены после загрузки страницы, выберите div и вызовите загрузчик на нем(например, $('.loader-inner').loaders())
  • Радуйтесь!

Настройка

Вы можете изменить цвет заднего фона. Добавьте стили к правильному вложенному в div элементу.

.ball-grid-pulse > div {
  background: orange;
}

Поддержка браузеров

  • IE11
  • Firefox 36
  • Chrome 41
  • Safari 8

Заключение

Спасибо за внимание!