Как сделать гиф прелоадер с задержкой. Прелоадер с процентной загрузкой

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

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

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

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

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

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

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

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

AreaForLoader { background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 9999; }

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

$(window).on("load", function () { $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader.delay(350).fadeOut("slow"); });

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

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

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

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