Как установить иконки загрузки на чистом 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
Заключение
На этом у меня все, а если вы сами хотите научиться создавать подобные вещи, то советую приобрести видеокурс HTML5 и CSS3 с Нуля до Гуру.
Спасибо за внимание!
-
Создано 19.07.2016 20:43:34
-
Михаил Русаков
Комментарии (2):
Клево!
Ответить
Это ответный комментарий!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.