Прелоадер с SVG анимацией

8 ноября 2015 Антон Кулешов 2024 0

Мы живём в эпоху, когда в интернете можно делать все: работать, отдыхать, играть, покупать и продавать, «готовить» еду, заниматься сексом и т.д.. Стандартный рабочий софт так же перекочевал онлайн. Практически любое приложение, будь то графический редактор, читалка-распознавала, просто удобный блокнот, давно обзавелись своей облачной версией. Ну что же, рядовому веб разработчику не гоже отставать от современных тенденций, и если вы решили обзавестись своим онлайн сервисом, то вам просто не обойтись без прелоадера.

Реклама

Скорость загрузки HTML страницы будет и останется самым важным моментом при создании веб-приложения. Очень часто бывает, что воспользовавшись каким-либо тяжелым веб-ресурсом, особенно если он связан с обработкой фото-видео, мы сталкиваемся с проблемой: закончил свой проект, кликнул сохранить, а ничего не происходит! На самом деле сервер во всю «пыхтит» над поставленной задачей, вот только ему надо дать немножко времени, а пользователя отвлечь от грустных мыслей красивой анимацией прелоадера.

Уделить внимание в этой статье я решил уже готовому решению, которое использует для свой работы SVG анимацию. А также имеет 13 готовых вариантов и, если понадобится, вы всегда сможете на базе их придумать что-нибудь более подходящие.

Как добавить прелоадер из примеров на странице демо, мы разберём на варианте «Растягивание». Тут важно учесть, что показ прелоудера осуществляется по клику на ссылку «Демонстрация». Первым делом подключаем необходимые стили и скрипты в шапке страницы:

<link href="css/component.css" type="text/css" rel="stylesheet" />
<script src="js/snap.svg-min.js"></script>

И перед закрывающимся элементом body:

<script src="js/classie.js"></script>
<script src="js/svgLoader.js"></script>
<script src="js/loader.js"></script>

Теперь переходим непосредственно к самой HTML разметке:

<div id="pagewrap" class="pagewrap">
	<div class="container show" id="page-1">
		<!--
			Сюда помещаем основной контент страницы,
			которая изначально показана
		-->
		<div class="column">
			<!--
				Кнопка для демострации и
				перехода на 2-ую страницу
			-->
			<p>
				<a class="pageload-link" href="#page-2">Демонстрация</a>
			</p>
		</div>
	</div>
	<div class="container" id="page-2">
		<!--
			Контент показываемый после клика
		-->
		<section>
			<!--
				Кнопка для возврата на первую
			-->
			<p><a class="pageload-link" href="#page-1">Назад</a></p>
		</section>
	</div>
	<div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
		<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
			<path d="M30,30 50,30 50,30 30,30 Z"/>
		</svg>
	</div>
</div>

Вот и всё, но давайте рассмотрим вариант при старте страницы. Для этого нам потребуется подправить скрипт в файле loader.js. Разметку оставим прежней только уберем кнопки и блок с id=page-2, а из блока с id=page-1 удалим класс show (тогда по умолчанию страница будет спрятана).

(function(){

	var pageWrap = document.getElementById("pagewrap"),
	    page = pageWrap.querySelector("div.container"),
	    loader = new SVGLoader(document.getElementById("loader"), {speedIn: 100});

	function init(){

		window.onload = function(){

			loader.show();

			setTimeout(function(){

				loader.hide();
				classie.addClass(page, "show");
			}, 2000);
		};
	};
	init();
})();

Вот собственно и сам код, убрав лишние и воспользовавшись методам onload() у объекта window, реализовали отработку прелоадара при старте страницы.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Слайд-шоу на заднем фоне сайта

11 ноября 2015 Антон Кулешов

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

Множество WordPress «велосипедов» в одном плагине Bicycles by falbar

5 июля 2016 Антон Кулешов

В большинстве случаев настройка и оптимизация сайта на движке WordPress состоит из набора всем известных «велосипедов» и шаблонов добавляемого кода, которые повторяются из проекта в проект. На данный момент у меня есть несколько сайтов на WordPress, поэтому я уже давно решил перенести, так называемую, «тонкую настройку» в плагин, о котором сегодня и пойдёт речь.

Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 Антон Кулешов

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.