Установка и использование скрипта загрузки страницы сайта
Перед установкой убедитесь что на странице с задействованным прелоадером подключена библиотека 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 половину значения ширины.