Индикаторы загрузки сайта CSS3

Сегодня мы хотели бы предложить вам скачать, и установить на ваш сайт один из более, чем пятидесяти индикаторов загрузки, выполненных на чистом CSS3, без применения каких-либо скриптов, картинок и плагинов. Индикатор загрузки, или preloader - это элемент дизайна, позволяющий скрыть от взгляда пользователя процесс формирования браузером страницы, или какой-либо её части (слайдера, картинки, видео, и т.д.). Это что-то вроде обложки для документов, открыв которую, вы можете увидеть основное содержимое. Код preloader обычно помещается в начало страницы в overlay, растянутый на весь экран, который автоматически закрывается через определённое количество времени. Подобное скрытие блока можно организовать при помощи простого javascript:

<script type="text/javascript">
setTimeout(function(){$('#overlay').fadeOut('fast')},10000); //10000 = 10 секунд
</script>

А само затемнение (overlay) легко создаётся с использованием одних лишь стилей:

#overlay {
width:100%;
height:100%;
background: rgba(66, 66, 66, 0.75); /* определяем цвет и прозрачность overlay */
z-index:9999; /* поднимаем overlay над страницей, чтобы он всегда был наверху */
}

Таким образом, мы можем получить требуемый затемняющийся при открытии страницы блок, который исчезнет через определённое время. Внутрь данного блока мы и поместим один из наших индикаторов загрузки, которые выполнены на чистом CSS3, без применения скриптов и анимированных картинок.

Скачать архив

Внутри архива вы найдёте файл каскадной таблицы стилей (CSS), а также html-файл со всеми примерами, которые вы видите ниже. Эти индикаторы загрузки достаточно просты в использовании, не требуют подключения javascript и jquery, созданы без применения каких-либо графических элементов, рисунков и анимаций. Preloader'ы поддерживаются практически всеми современными браузерами, одинаково отображаются на любых устройствах, и не теряют качества при увеличении и уменьшении.

Примеры индикаторов загрузки CSS3

Circle1
Circle2
Circle3
Circle4
Circle5
Circle6

Простые окружности, как монохромные, так и цветные. Сегменты различной длины вращаются по часовой стрелке, и против неё. При помощи css вы можете кастомизировать цвет, а также скорость, и направление вращения сегментов.

Nest1
Nest2
Nest3
Nest4
Nest5
Nest6

Вложенные друг в друга окружности с сегментами, вращающимися с разной скоростью, и в разных направлениях не только в плоскости, но и в третьем измерении. Также легко поддаются кастомизации при наличии некоторых знаний в css.

bars1
bars2
bars3
bars4
bars5
bars6

Классические индикаторы загрузки в виде анимированных полосок, состоящих из прямоугольных элементов, которые увеличиваются и уменьшаются с разной амплитудой.

Dots1
Dots2
Dots3
Dots4
Dots5
Dots6

Индикаторы загрузки в виде анимированных полосок, состоящих из точек различного диаметра.

spinner1
spinner2
spinner3
spinner4
spinner5
spinner6

Ещё несколько круглых анимированных preloader'ов на чистом CSS3 для вашего сайта.

square1
square2
square3
square4
square5
square6

Квадратные индикаторы загрузки, чёрно-белые и цветные. Элементы этих preloader'ов способны увеличиваться и уменьшаться, а также вращаться вокруг собственной оси.

round1
round2
clock1
wave1
heart1
bioh1
bubble1
tringle1
triangle2
triangle3
triangle4
triangle5
pacman1
eye1
santa1
tree1
snowman1
elf1

Подборка необычных индикаторов загрузки, среди которых пакман, пульсирующее сердце, часовой механизм, значок биологоической опасности, открытый глаз, снеговик, новогодняя ёлка, Дед Мороз, и множество других интересных прелоадеров.

2659 просмотров

Комментарии

Томас #
7 января 2016 в 11:48
bioh1, triangle2-5, ёлка и дед мороз - отсутствует анимация при просмотре с Safari