Индикатор для загрузки страницы · jQuery

Индикатор для загрузки страницы

Скрипт для индикаторов и прелоадеров предварительной загрузки страницы, описаны способы применения к картинкам, элементам CSS и SVG дополненные демо примерами.

Установка и использование скрипта загрузки страницы сайта

Перед установкой убедитесь что на странице с задействованным прелоадером подключена библиотека jQuery.

Использование прелоадера картинкой

В качестве индикатора будет задействована картинка. Добавьте код перед закрывающим тегом </head>.

<style>
.preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 overflow: hidden !important;
 z-index: 99999;
}
.loaderimg {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -30px 0 0 -30px;
 width: 60px;
 height: 60px;
 background: url(//atmpl.ru/design/preloader/2015/script-loader/preloader.gif) center center no-repeat;
}
</style>
<script>
jQuery(window).load(function() {
 $(".loaderimg").fadeOut();
 $(".preloader").delay(1000).fadeOut("slow");
});
</script>

Поместите весь код сразу после тега <body>.

<div class="preloader">
<div class="loaderimg"></div>
</div>

Демо использования прелоадера картинки

Индикатор загрузки страницы на CSS

Прелоадер загрузки страницы выполнен с применением свойств CSS. Разместите весь код перед закрывающим тегом </head>.

<style>
.preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 overflow: hidden !important;
 z-index: 99999;
}
.loaderbig {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -25px 0 0 -25px;
 -webkit-animation:loaderbig .5s infinite linear;
 animation:loaderbig .5s infinite linear;
}
.loadersmall {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7; 
 width:30px;
 height:30px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -15px 0 0 -15px;
 -webkit-animation:loadersmall .5s infinite linear;
 animation:loadersmall .5s infinite linear;
}
@-webkit-keyframes loaderbig {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes loadersmall {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(-360deg); }
}
@keyframes loaderbig {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
}
@keyframes loadersmall {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(-360deg); }
}
</style> 
<script>
jQuery(window).load(function() {
 $(".loaderbig, .loadersmall").fadeOut();
 $(".preloader").delay(1000).fadeOut("slow");
});
</script>

Поместите весь код сразу после тега <body>.

<div class="preloader">
<div class="loadersmall"></div>
<div class="loaderbig"></div>
</div>

Демо использования прелоадера CSS

Индикатор загрузки страницы SVG

В качестве прелоадера будет использоваться элемент SVG. Нужно добавить весь код перед закрывающим тегом </head>.

<style>
.preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background: #000;
 overflow: hidden !important;
 z-index: 99999;
}
.loadersvg {
 height: 120px;
 width: 120px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -60px 0 0 -60px;
}
.g-circles {
 fill: orangered;
}
.g-circle {
 transform-origin: 60px 60px;
 animation: 1.2s linear infinite;
 animation-name: colors, opacity;
}
.g-circle:nth-child(12n + 1) {
 transform: rotate(-30deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.1s;
}
.g-circle:nth-child(12n + 2) {
 transform: rotate(-60deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.2s;
}
.g-circle:nth-child(12n + 3) {
 transform: rotate(-90deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.3s;
}
.g-circle:nth-child(12n + 4) {
 transform: rotate(-120deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.4s;
}
.g-circle:nth-child(12n + 5) {
 transform: rotate(-150deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.5s;
}
.g-circle:nth-child(12n + 6) {
 transform: rotate(-180deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.6s;
}
.g-circle:nth-child(12n + 7) {
 transform: rotate(-210deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.7s;
}
.g-circle:nth-child(12n + 8) {
 transform: rotate(-240deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.8s;
}
.g-circle:nth-child(12n + 9) {
 transform: rotate(-270deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.9s;
}
.g-circle:nth-child(12n + 10) {
 transform: rotate(-300deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1s;
}
.g-circle:nth-child(12n + 11) {
 transform: rotate(-330deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1.1s;
}
.g-circle:nth-child(12n + 12) {
 transform: rotate(-360deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1.2s;
}
@-webkit-keyframes opacity {
 0% {
 fill-opacity: 1;
 }
 75% {
 fill-opacity: 0;
 }
}
@keyframes opacity {
 0% {
 fill-opacity: 1;
 }
 75% {
 fill-opacity: 0;
 }
}
@-webkit-keyframes colors {
 0% {
 fill: orangered;
 }
 50% {
 fill: teal;
 }
}
@keyframes colors {
 0% {
 fill: orangered;
 }
 50% {
 fill: teal;
 }
}
@-webkit-keyframes transform {
 50% {
 transform: scale(0.5);
 }
}
@keyframes transform {
 50% {
 transform: scale(0.5);
 }
} 
</style> 
<script>
jQuery(window).load(function() {
 $(".loadersvg").fadeOut();
 $(".preloader").delay(1000).fadeOut("slow");
});
</script>

А этот код сразу после тега <body>.

<div class="preloader">
<svg viewBox="0 0 120 120" class="loadersvg">
 <symbol id="s-circle">
 <circle r="10" cx="10" cy="10"></circle>
 </symbol>
 <rect width="100%" height="100%"/>
 <g id="circle" class="g-circles">
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g> 
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 <g class="g-circle">
 <use xlink:href="#s-circle" class="u-circle"/>
 </g>
 </g>
 </svg>
</div>

Демо использования прелоадера SVG

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

.preloader {
background: #fff; - Цвет фона страницы при работе индикатора
.loaderimg {, .loadercss {, .loadersvg {
width:ЧИСЛО; - Ширина индикатора
height:ЧИСЛО; - Высота индикатора
margin:ЧИСЛО1px 0 0 ЧИСЛО2px; - В значении ЧИСЛО1 укажите половину значения высоты индикатора, а в значении ЧИСЛО2 половину значения ширины.

Рейтинг: 4.4/5 из 7



Добавлено Автор Ник Источник Просмотров Комментариев Теги
19-02-2015 Михаил Меренков aTmpl © 3154 0 Прелоадер, скрипт загрузки, Загрузка страницы, индикатор загрузки