Когда пользователь открывает веб-страницу или приложение, они не загружаются моментально, нужно подождать какое-то время. Чтобы посетитель вашего сайта не подумал, что «все пропало», «все сломалось» и «ничего не работает», ему можно показать прелоадер — небольшое анимированное изображение, индикатор загрузки.
Когда посетитель уже зашел на сайт и выполняет там какие-то действия, ему тоже может случиться немного подождать: пока файл загрузится, пока скрипт выполнится и т. п. Опять же, чтобы пользователь не думал, что он нажал на кнопку, а ничего не происходит, ему показывают прелоадер.
Сами прелоадеры могут быть разными, тут все зависит от фантазии создателей сайта (приложения). Но довольно часто они делаются в виде вращающихся колесиков (в связи с этим их также называют спиннерами).
Чтобы создать красивый прелоадер, не обязательно быть крутым программистом. Вы вполне можете обойтись знанием 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.
Надеемся, приложенный код поможет вам разобраться в том, как создаются прелоадеры, а красивые анимации вдохновят вас на создание собственных.
