Прелоадер SVG · Вращающиеся полоски

Прелоадер SVG - Вращающиеся полоски

Прелоадер загрузки для сайта в виде SVG элемента с вращающимися полосками, описание по установке и настройке, а так же демо реального применения.

CSS стили SVG прелоадера

Добавьте в зону <head> стили CSS прелоадера.

<style>
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
overflow: hidden !important;
z-index: 99999;
}
svg#preloaderSvg {
position:absolute;
z-index:999999;
left:50%;
top: 50%;
width:200px;
height:200px;
margin:-100px 0 0 -100px;
}
</style>

HTML код SVG прелоадера

Код HTML устанавливается после тега <body>, или внутри того элемента для которого может быть применён прелоадер.

<div id="preloader">
<svg version="1.1" id="preloaderSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<path fill="none" stroke="#5bff8f" stroke-width="3" stroke-miterlimit="10" d="M127.413,72.587
c15.14,15.14,15.141,39.684,0,54.825s-39.686,15.142-54.826,0.001c-15.141-15.14-15.141-39.686,0-54.826"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"></animateTransform>
</g>
<g>
<path fill="none" stroke="#5bff8f" stroke-width="3" stroke-miterlimit="10" d="M123.056,76.944
c12.733,12.733,12.732,33.378,0,46.111s-33.378,12.732-46.111-0.001c-12.732-12.732-12.732-33.377,0-46.11"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite"></animateTransform>
</g>
<g>
<path fill="none" stroke="#5bff8f" stroke-width="3" stroke-miterlimit="10" d="M118.738,81.261
c10.352,10.351,10.352,27.128,0,37.479c-10.35,10.35-27.126,10.351-37.478,0c-10.35-10.35-10.35-27.129,0-37.479"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite"></animateTransform>
</g>
<g>
<path fill="none" stroke="#5bff8f" stroke-width="3" stroke-miterlimit="10" d="M114.492,85.508c8.004,8.004,8.004,20.979,0,28.983
c-8.004,8.004-20.979,8.005-28.984,0.001c-8.004-8.004-8.004-20.981,0-28.985"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"></animateTransform>
</g>
</svg>
</div>

jQuery скрипт SVG прелоадера

Добавьте перед закрывающим тегом </head> скрипт jQuery SVG прелоадера.

<script>
jQuery(window).load(function() {
 $("#preloaderSvg").fadeOut();
 $("#preloader").delay(1000).fadeOut("slow");
});
</script>

Настройки SVG прелоадера

Основные настройки цвета и тощины SVG прелоадера, остальное не рекомендуется изменять.

stroke="#5bff8f"
Цвет полоски
stroke-width="3"
Толщина полоски

Демо SVG прелоадера

Для просмотра демо SVG прелоадера нажмите на значёк Кнопка выполнения кода в редакторе.

Дополнительные сведения

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


Рейтинг: 5.0/5 из 5



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-06-2015 Михаил Меренков aTmpl © 1116 0 Strips, jQuery, preloader, Rotating, SVG