Как сделать полоску загрузки
В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!
Горизонтальная линия сплошная - css
В данном пункте разберем создание горизонтальной линии с помощью блока div.
Для этого на м понадобится:
Далее нам понадобится attribute style
Соединим наш код горизонтальной сплошной линии вместе:
Пример вывода горизонтальной сплошной линии с помощью блока div
Пример вывода горизонтальной сплошной линии толщина 5px
Горизонтальная линия точками - css
В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была "горизонтальная линия сплошная", то в этом пункте мы сделаем "горизонтальную линию точками!"
Для этого нам понадобится:
Опять будем использовать двойной тег div:
Индикаторы выполнения или индикаторы процесса – это элемент графического интерфейса пользователя, который предназначен для отображения процесса выполнения какой-либо задачи, например, загрузки формы обратной связи на сервер.
Отображение процесса обычно осуществляется слева направо.
Простой индикатор выполнения (progress)
Компонент Progress (в Bootstrap 3 – Progress bar ) создаётся с помощью двух элементов HTML, CSS для установки ширины и нескольких атрибутов. Bootstrap не использует HTML5 элемент progress .
Установка процента завершённости задачи осуществляется с помощью CSS свойства width , которое устанавливается индикатору выполнения (progress) с помощью атрибута style .
Примеры индикаторов выполнения (Bootstrap 3):
Примеры индикаторов выполнения (Bootstrap 4):
Индикатор выполнения с текстовым контентом
Добавление текста в индикатор выполнения осуществляется посредством его в помещения в элемент с классом progress-bar .
Изменение высоты индикатора выполнения
Установка высоты индикатору выполнения осуществляется посредством добавления к элементу с классом progress CSS свойства height с нужным значением.
Изменение цвета индикатора выполнения
Изменения цвета индикатора выполнения в Bootstrap 4 осуществляется с помощью background-классов bg-success , bg-info , bg-warning , bg-danger и др. Один из этих классов необходимо к элементу с классом progress-bar .
В Bootstrap 3 изменение цвета индикатора выполнения с помощью специальных классов progress-bar-success , progress-bar-info , progress-bar-warning и progress-bar-danger . Один из этих классов, как и в фреймворке Bootstrap 4, необходимо добавить к элементу, имеющему класс progress-bar .
Несколько индикаторов на одной полоске
Компоненты "Progress" (Bootstrap 4) и "Progress bar" (Bootstrap 3) позволяют отобразить на одной полоске несколько индикаторов процесса.
Индикаторы процесса с полосатым фоном
Добавление полос к текущему цвету фона индикатора выполнения осуществляется посредством дополнительного класса progress-bar-striped . Этот класс необходимо добавить к элементу с классом progress-bar :
Индикаторы с анимированным полосатым фоном
Полосатый градиент индикатора выполнения может быть анимирован. Осуществляется это посредством добавления дополнительного класса (в Bootstrap 3 - active , в Bootstrap 4 - progress-bar-animated ) к элементу с классом progress-bar . Анимация полос в Bootstrap выполняется справа налево с помощью CSS3.
Когда вы открываете новую страницу нашего сайта, то в самом верху видите бегущую зеленую полоску, показывающую прогресс загрузки всех элементов страницы. Удобно, если у вас интернет медленный и вам надо дождаться когда загрузится все на странице. Для веб-разработчика тоже полезный элемент - посетитель видит, что до загрузки страницы осталось совсем немного и не уходит а следит за полоской и ждет пока все загрузится. Приводим стиль для полоски: И код скрипта, добавляющего контейнер div в верхнюю часть страницы (сразу после body)^
Preloader при загрузке страниц чаще всего нужен в том случае, если необходимо, чтобы пользователь начал пользоваться сайтом только после загрузки всех ресурсов (изображения, javascript-код и так далее). Но нужно использовать его с осторожностью, так как пока все ресурсы не будут загружены, контент остаётся недоступным
Пример Preloader, который будем реализовывать в этой практической статье, можно посмотреть на видео
Этот же пример на Codepen
Или просто обновите страницу с этой статьёй - при открытии статьи, вы уже, скорей всего, заметили данный Preloader :)
Верстаем структуру
По ссылке выше, выбираем наиболее подходящий Preloader и нажимаем на Source
В появившемся окне копируем HTML-структуру Preloader
В разметке создадим блок
Добавляем стили
В том же окне, где копировали HTML-структуру Preloader, копируем CSS-стили для него
Добавляем остальные стили
Пишем логику на JavaScript
Логика максимально простая - определяем, когда все ресурсы страницы будут загружены, ищем блок Preloader и добавляем ему класс для скрытия
Итоги
Конечно, Preloader можно добавлять не только на событие загрузки страницы. Preloader часто добавляют также при AJAX-запросах в отдельных компонентах, не блокируя остальную часть сайта. Но об этом в другой раз :)
Делал я посадочную страницу - Landing Page, которая была насыщена скриптами, изображениями и разной анимацией. Загрузка страницы происходила примерно за 5 секунд. Это не так уж и много, но в это время на экране сначала появлялась HTML разметка, потом начинали срабатывать скрипты и наконец появлялись изображения. Если посетитель не терпелив, он начинает скролить страницу, а та в это время слабо напоминает полноценный сайт и постоянно скачет, чем немного напрягает.
Тогда я немного поразмыслив, решил, что нужно что-то, что скроет загрузку сайта, а покажет что-то в замен, а когда страница загрузится полностью, тогда уже будет показан посетителю в полном объеме. Поискав немного то что мне нужно, я скрестил несколько скриптов и немного добавил своего в стилях, я получил нужный мне результат. Теперь посетители посадочной страницы видят небольшую заставку, прежде чем увидят полностью загруженный контент. Скрипт работает таким образом, что он грузится в первую очередь и показывает то, что мы зададим в настройках, после загрузки страницы браузер вызывает событие window.onload и наш скрипт показывает загруженную страницу.
Выглядит это примерно так, чем дольше будет грузится страница, тем дольше будет показана заставка:
На свой сайт или страницу подключить такой прелоадер, можно довольно не сложно. Первое что понадобится сделать для осуществления задумки, это конечно же вставить HTML разметку. Сделать это можно, например в шапке сайта. Вставьте в любое место, лучше всего сразу после открывающего тега body. Это основной блок с ID p_prldr, который будет заполнять весь экран и внутри которого можно расположить что угодно, что увидит посетитель до полной загрузки страницы. Внутри этого блока разместим анимацию загрузки и текст.
Далее в файл стилей задаем настройки отображения нашего прелоадера.
Блок с классом svg_anm, это наша анимация. В своем прелоадере я использую SVG графику для анимации. Ее можно масштабировать до нужных мне размеров и выглядит она реалистично и прикольно. Если хотите, можете использовать какую-то GIF анимацию или просто статичную картинку, все зависит от Вашей фантазии. У меня это файл oval.svg его размер я установил параметром background-size:41px;, также нужно указать ширину и высоту блока равную размерам анимации. width: 41px; height: 41px;
Если Вам тоже по душе такая анимация, можете выбрать из ниже приведенных, для этого правой кнопкой миши щелкните по нужной и сохраните в нужную папку.
Ну и сами анимации.
Фон анимации установлен вручную и он будет у Вас как в основном блоке прелоадера, сама анимация белая, так что если откроете ее после скачивания, то ничего не увидите 🙂 Чтобы потом не писали, что не работает.
Читайте также: