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

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

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

5 155 · 01 мая 2017 в 18:02 ·
Создание прелоадера для сайта это простое дело, которое не только сделает ваш сайт красивее, но также увеличить конверсию пользователей.
Создание прелоадеров стало очень модными, ведь они выглядят красиво, а главное заставляют пользователя не покинуть сайт пока он еще грузиться.

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

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

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

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

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

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

<div class="areaForLoader">
   <div class="preloader"></div>
</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');
});
По сути вам только остается добавить какую-нибудь красивую анимацию к вашим прелоадерам. Кроме того, я нашел несколько интересных примеров прелоадеров, так что вы можете их глянуть:

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


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


See the Pen Flat Preloader (keyframes demo) by ZeroSpree (@zerospree) on CodePen.

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

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

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



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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="nprogress.css">
	<link href="https://itproger.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<title>Preloader</title>
</head>
<body>
	
	<!-- jQuery -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="nprogress.js"></script>
	<script>
		$(document).ready (function () {
			NProgress.start ();
			NProgress.set (0.4);
			setTimeout(function () {
				NProgress.done ();
			}, 4000);
		});
	</script>
	<!-- HelloPreload http://hello-site.ru/preloader/ -->
<style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;}</style>
<div id="hellopreloader"><div id="hellopreloader_preload"></div><p><a href="http://hello-site.ru">Hello-Site.ru. Бесплатный конструктор сайтов.</a></p></div>
<script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};</script>
<!-- HelloPreload http://hello-site.ru/preloader/ -->
</body>
</html>

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