Как сделать загрузку на сайте

Как сделать красивый прелоадер для сайта

Создание прелоадера для сайта это простое дело, которое не только сделает ваш сайт красивее, но также увеличить конверсию пользователей.

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

Как же сделать прелоадер для сайта?

Сам прелоадер можно сделать всего за пару секунд, если использовать готовые решения или же за пару минут, если писать все самому с чистого листа 🙂

Но давайте все по порядку.

Сама суть браузера заключается в том, что он отображает код поэтапно. Это означает что браузер проходит весь код сверху вниз и если где-то посередине кода он встретит тяжелые JS скрипты, то сайт немного застынет на этом моменте.

Preloader делает так, что мы скрываем весь контент сайта и отображаем его полностью только тогда, когда весь сайт будет загружен со всеми скриптами и стилями.

Краткая схема работы прелоадера:

• Буквально сразу после открывающегося тега body размещаем div c прелоадером;
• Включаем прелоадер и скрываем все содержимое страницы;
• После загрузки страницы убираем preloader и показываем сайт.

Теперь разберемся с кодом. Изначально вам надо поместить div с прелоадером, что-то вроде этого:
Дальше стоит добавить стили, чтобы прелоадер занимал всю ширину экрана и смотрелся как-то неплохо:

.areaForLoader

Последним делом вам надо скрывать прелоадер. Для этого можно воспользоваться следующим кодом на jQuery :

$(window).on('load', function () < $preloader = $('.loaderArea'), $loader = $preloader.find('.loader'); $loader.fadeOut(); $preloader.delay(350).fadeOut('slow'); >);

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

See the Pen CSS3 Loading Spinner by Matthew Roelle ( @Mattykins ) on CodePen .

See the Pen Random Loader by Mr Alien ( @mr_alien ) on CodePen .

Создание прелоадера при помощи плагинов

Также существуют и другие способы создания прелоадеров и полос загрузки. К примеру, вы можете воспользоваться специальным плагином NProgress.js для создания красивой полосы загрузки или же воспользоваться конструктором прелоадеров .

Как раз об этих двух вещах отлично рассказано в видео уроке по созданию прелоадера, поэтому советую вам посмотреть этот видео урок:

И напоследок, оставлю здесь весь код из видео урока выше, чтобы вам было легче во всем разобраться:

            
Hello-Site.ru. Бесплатный конструктор сайтов.
   

Больше интересных новостей

10 языков программирования, которые стали абсолютно ненужными

История компании Boston Dynamics. Как появлялись их роботы?

Какой язык программирования можно назвать самым простым?

10 прекрасных библиотек c SVG-иконками

Как сделать простой Preloader при загрузке страниц

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

Пример Preloader, который будем реализовывать в этой практической статье, можно посмотреть на видео

Этот же пример на Codepen

Или просто обновите страницу с этой статьёй — при открытии статьи, вы уже, скорей всего, заметили данный Preloader 🙂

Верстаем структуру

Для начала необходимо найти подходящий Preloader. Небольшой набор качественных Preloaders можно посмотреть здесь — https://tobiasahlin.com/spinkit/

По ссылке выше, выбираем наиболее подходящий Preloader и нажимаем на Source

В появившемся окне копируем HTML-структуру Preloader

В разметке создадим блок и вставляем в него скопированный HTML-код

Добавляем стили

В том же окне, где копировали HTML-структуру Preloader, копируем CSS-стили для него

.sk-chase < width: 40px; height: 40px; position: relative; animation: sk-chase 2.5s infinite linear both; >.sk-chase-dot < width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; >.sk-chase-dot:before < content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; >.sk-chase-dot:nth-child(1) < animation-delay: -1.1s; >.sk-chase-dot:nth-child(2) < animation-delay: -1.0s; >.sk-chase-dot:nth-child(3) < animation-delay: -0.9s; >.sk-chase-dot:nth-child(4) < animation-delay: -0.8s; >.sk-chase-dot:nth-child(5) < animation-delay: -0.7s; >.sk-chase-dot:nth-child(6) < animation-delay: -0.6s; >.sk-chase-dot:nth-child(1):before < animation-delay: -1.1s; >.sk-chase-dot:nth-child(2):before < animation-delay: -1.0s; >.sk-chase-dot:nth-child(3):before < animation-delay: -0.9s; >.sk-chase-dot:nth-child(4):before < animation-delay: -0.8s; >.sk-chase-dot:nth-child(5):before < animation-delay: -0.7s; >.sk-chase-dot:nth-child(6):before < animation-delay: -0.6s; >@keyframes sk-chase < 100% < transform: rotate(360deg); >> @keyframes sk-chase-dot < 80%, 100% < transform: rotate(360deg); >> @keyframes sk-chase-dot-before < 50% < transform: scale(0.4); >100%, 0% < transform: scale(1.0); >> 

Добавляем остальные стили

body < background: #121212; >.images < display: grid; grid-template-columns: 1fr 1fr; grid-gap: 32px; gap: 32px; padding: 32px; >.images__image < border-radius: 8px; overflow: hidden; >.images__image img < width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; >/* Стили для основного блока Preloader */ .preloader < /* Фиксируем блок на всю ширину и высоту окна, чтобы перекрывать все остальные элементы */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9999; /* Центрируем анимацию Preloader */ display: flex; align-items: center; justify-content: center; /* При загрузке страницы, Preloader сразу отображается */ opacity: 1; visibility: visible; /* Добавляем затемнение */ background: rgba(18,18,18,0.64); /* Добавляем плавный переход */ transition: opacity 1s, visibility 0s 0s; >/* Класс для скрытия Preloader */ .preloader_hidden < visibility: hidden; opacity: 0; transition: opacity 1s, visibility 0s 1s; >/* Скопированый код анимации Preloader */ .sk-chase < width: 128px; height: 128px; position: relative; -webkit-animation: sk-chase 2.5s infinite linear both; animation: sk-chase 2.5s infinite linear both; >.sk-chase-dot < width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-animation: sk-chase-dot 2s infinite ease-in-out both; animation: sk-chase-dot 2s infinite ease-in-out both; >.sk-chase-dot:before < content: ''; display: block; width: 25%; height: 25%; background-color: #3626a7; border-radius: 100%; -webkit-animation: sk-chase-dot-before 2s infinite ease-in-out both; animation: sk-chase-dot-before 2s infinite ease-in-out both; >.sk-chase-dot:nth-child(1) < -webkit-animation-delay: -1.1s; animation-delay: -1.1s; >.sk-chase-dot:nth-child(2) < -webkit-animation-delay: -1s; animation-delay: -1s; >.sk-chase-dot:nth-child(3) < -webkit-animation-delay: -0.9s; animation-delay: -0.9s; >.sk-chase-dot:nth-child(4) < -webkit-animation-delay: -0.8s; animation-delay: -0.8s; >.sk-chase-dot:nth-child(5) < -webkit-animation-delay: -0.7s; animation-delay: -0.7s; >.sk-chase-dot:nth-child(6) < -webkit-animation-delay: -0.6s; animation-delay: -0.6s; >.sk-chase-dot:nth-child(1):before < -webkit-animation-delay: -1.1s; animation-delay: -1.1s; >.sk-chase-dot:nth-child(2):before < -webkit-animation-delay: -1s; animation-delay: -1s; >.sk-chase-dot:nth-child(3):before < -webkit-animation-delay: -0.9s; animation-delay: -0.9s; >.sk-chase-dot:nth-child(4):before < -webkit-animation-delay: -0.8s; animation-delay: -0.8s; >.sk-chase-dot:nth-child(5):before < -webkit-animation-delay: -0.7s; animation-delay: -0.7s; >.sk-chase-dot:nth-child(6):before < -webkit-animation-delay: -0.6s; animation-delay: -0.6s; >@-webkit-keyframes sk-chase < 100% < transform: rotate(360deg); >> @keyframes sk-chase < 100% < transform: rotate(360deg); >> @-webkit-keyframes sk-chase-dot < 80%, 100% < transform: rotate(360deg); >> @keyframes sk-chase-dot < 80%, 100% < transform: rotate(360deg); >> @-webkit-keyframes sk-chase-dot-before < 50% < transform: scale(0.4); >100%, 0% < transform: scale(1); >> @keyframes sk-chase-dot-before < 50% < transform: scale(0.4); >100%, 0% < transform: scale(1); >> 

Пишем логику на JavaScript

Логика максимально простая — определяем, когда все ресурсы страницы будут загружены, ищем блок Preloader и добавляем ему класс для скрытия

window.addEventListener('load', () => < /* Страница загружена, включая все ресурсы */ const preloader = document.querySelector('.preloader') /* находим блок Preloader */ preloader.classList.add('preloader_hidden') /* добавляем ему класс для скрытия */ >) 

Итоги

Конечно, Preloader можно добавлять не только на событие загрузки страницы. Preloader часто добавляют также при AJAX-запросах в отдельных компонентах, не блокируя остальную часть сайта. Но об этом в другой раз 🙂

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!

Как сделать экран загрузки (preloader) на сайте на JavaScript?

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

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

В качестве такого окна загрузки может быть как картинка или однотонный фон, так и небольшая анимация.

Основная идея работы этого окна – показываться сразу при открытии сайта и скрытие его при полной загрузке.

Реализацию такого окна я предлагаю вам на JavaScript.

Перед закрывающим тегом на нужных страницах вашего сайта вставьте код:

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

По виду это окно будет выглядеть следующим образом:

По желанию вы можете сменить стиль оформления.

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

Как сделать прелоадер на время загрузки JS?

Достаточно закрыть необходимые вам или все элементы на странице прелоадером, который будет исчезать после необходимых действий на странице.

Пример доработан. Версию с использованием библиотеки jquery можно считать устаревшей, но она была оставлена, чтобы показать, как делать не нужно.

Обновленный вариант (2019):

function loadData() < return new Promise((resolve, reject) =>< // setTimeout не является частью решения // Код ниже должен быть заменен на логику подходящую для решения вашей задачи setTimeout(resolve, 2000); >) > loadData() .then(() => < let preloaderEl = document.getElementById('preloader'); preloaderEl.classList.add('hidden'); preloaderEl.classList.remove('visible'); >);

#preloader < position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #fbfbfb url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center; >.visible < visibility: visible; opacity: 1; transition: opacity 2s linear; >.hidden

 
EXAMPLE

Вариант 2015 года (Устарел. Так делать не нужно!):

jQuery(document).ready(function($) < $(window).load(function() < setTimeout(function() < $('#preloader').fadeOut('slow', function() <>); >, 2000); >); >);

#preloader < position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center; >

 
EXEMPLE