Создаем прелоадеры при помощи CSS

0
2007
views

Когда пользователь открывает веб-страницу или приложение, они не загружаются моментально, нужно подождать какое-то время. Чтобы посетитель вашего сайта не подумал, что «все пропало», «все сломалось» и «ничего не работает», ему можно показать прелоадер — небольшое анимированное изображение, индикатор загрузки.

Когда посетитель уже зашел на сайт и выполняет там какие-то действия, ему тоже может случиться немного подождать: пока файл загрузится, пока скрипт выполнится и т. п. Опять же, чтобы пользователь не думал, что он нажал на кнопку, а ничего не происходит, ему показывают прелоадер.

Сами прелоадеры могут быть разными, тут все зависит от фантазии создателей сайта (приложения). Но довольно часто они делаются в виде вращающихся колесиков (в связи с этим их также называют спиннерами).

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

1. Лесенка

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

2. Анимированные спиннеры

See the Pen CSS Loader by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.

3. Прелоадер на CSS, использующий sass map для определения цвета

See the Pen Color Map Dot Loader by Ryan Mulligan (@hexagoncircle) on CodePen.

4. Красивые и простые прелоадеры и спиннеры на чистом CSS

See the Pen Fancy CSS loaders / spinners by Jenning (@jenning) on CodePen.

5. Sassy SVG

See the Pen Pure CSS Loader by Rafael González (@rgg) on CodePen.

6. А как вам такой вариант?

See the Pen CSS Loader by Derek Morash (@derekmorash) on CodePen.

7. Этот прелоадер автор сделал для веб-приложения, связанного со сферой здравоохранения

See the Pen SVG & CSS Loader by Chris Samuels (@anycircle) on CodePen.

8. Все лоадеры анимированы при помощи чистой SVG-анимации

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

9. CSS-прелоадеры

See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.

10. И еще вот такие

See the Pen SVG Loaders by Zach Schnackel (@zslabs) on CodePen.

11. Простые CSS-прелоадеры

See the Pen Loaders by Aaron Iker (@aaroniker) on CodePen.

Надеемся, приложенный код поможет вам разобраться в том, как создаются прелоадеры, а красивые анимации вдохновят вас на создание собственных.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here