Прелоадер (preloader)
Прелоадер (preloader) - это заглушка, которая показывается виде анимации или картинки пока загружается страница.
Применяется для сайтов у которых загрузка страницы занимает несколько секунд. Появляется при переходе на страницу и исчезает когда страница полностью загружена.
Прелоадер (preloader) состоит из кода html который показывает его, css стиля который определяет анимированный вид, js-скрипта, который управляет им (загружает, показывает, убирает).
Как сделать анимированный прелоадер для сайта
В начале страницы, после тега <body>, вставьте следующий код.html
<div class="preloader">
<div class="preloader__row">
<div class="preloader__item"></div>
<div class="preloader__item"></div>
</div>
</div>
Это контейнер в котором загружается созданный прелоадер.
css
.preloader {
/*фиксированное позиционирование*/
position: fixed;
/* координаты положения */
/* фоновый цвет элемента */
background: #e0e0e0;
/* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */
z-index: 1001;
}
.preloader__row {
position: relative;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin-top: -35px;
margin-left: -35px;
text-align: center;
animation: preloader-rotate 2s infinite linear;
}
.preloader__item {
position: absolute;
display: inline-block;
top: 0;
background-color: #337ab7;
border-radius: 100%;
width: 35px;
height: 35px;
animation: preloader-bounce 2s infinite ease-in-out;
}
.preloader__item:last-child {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes preloader-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes preloader-bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
.loaded_hiding .preloader {
transition: 0.3s opacity;
opacity: 0;
}
.loaded .preloader {
display: none;
}
Здесь создаётся анимированный прелоадер.
js
<script>
window.onload = function () {
document.body.classList.add('loaded_hiding');
window.setTimeout(function () {
document.body.classList.add('loaded');
document.body.classList.remove('loaded_hiding');
}, 500);
}
</script>
Скрипт выполняющий загрузку прелоадера и его уничтожение после загрузки страницы.
Коллекция примеров анимированных прелоадеров для сайта
Прелоадер в виде анимированной svg иконки
html
<div class="preloader">
<svg class="preloader__image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor"
d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48
21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z">
</path>
</svg>
</div>
css
.preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
/* фоновый цвет */
background: #e0e0e0;
z-index: 1001;
}
.preloader__image {
position: relative;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin-top: -35px;
margin-left: -35px;
text-align: center;
animation: preloader-rotate 2s infinite linear;
}
@keyframes preloader-rotate {
100% {
transform: rotate(360deg);
}
}
.loaded_hiding .preloader {
transition: 0.3s opacity;
opacity: 0;
}
.loaded .preloader {
display: none;
}
js
<script>
window.onload = function () {
document.body.classList.add('loaded_hiding');
window.setTimeout(function () {
document.body.classList.add('loaded');
document.body.classList.remove('loaded_hiding');
}, 500);
}
</script>
Вариант №3
html
<div class="preloader-1">
<svg>
<g>
<path d="M 50,100 A 1,1 0 0 1 50,0"/>
</g>
<g>
<path d="M 50,75 A 1,1 0 0 0 50,-25"/>
</g>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#BFE2FF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#337AB7;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</div>
css
.preloader-1 svg path {
stroke: url(#gradient);
stroke-width: 20px;
stroke-linecap: round;
fill: none;
stroke-dasharray: 0 157px;
stroke-dashoffset: 0;
animation: preloader-1-escalade 2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes preloader-1-slide {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(50px);
}
}
@keyframes preloader-1-escalade {
0% {
stroke-dasharray: 0 157px;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 156px 157px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 156px 157px;
stroke-dashoffset: -156px;
}
}
js
<script>
window.onload = function() {
document.querySelector('.preloader-1').classList.add("preloader-remove");
};
</script>
Прелоадер №4
html
<div class="preloader-2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css
.preloader-2 {
width: auto;
height: auto;
}
.preloader-2 ul {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
animation: preloader-2-rot 16s linear infinite;
}
@keyframes preloader-2-rot {
100% {
transform: rotate(360deg);
}
}
.preloader-2 li {
width: 40px;
height: 40px;
background: #337AB7;
border-radius: 4px;
animation: preloader-2-scale 0.8s linear alternate infinite;
}
@keyframes preloader-2-scale {
100% {
transform: scale(0.1);
opacity: 0;
}
}
.preloader-2 li:nth-child(1) {
z-index: 24;
}
.preloader-2 li:nth-child(2) {
z-index: 23;
}
.preloader-2 li:nth-child(3) {
z-index: 22;
}
.preloader-2 li:nth-child(4) {
z-index: 21;
}
.preloader-2 li:nth-child(5) {
z-index: 20;
}
.preloader-2 li:nth-child(6) {
z-index: 19;
}
.preloader-2 li:nth-child(7) {
z-index: 18;
}
.preloader-2 li:nth-child(8) {
z-index: 17;
}
.preloader-2 li:nth-child(9) {
z-index: 16;
}
.preloader-2 li:nth-child(10) {
z-index: 15;
}
.preloader-2 li:nth-child(11) {
z-index: 14;
}
.preloader-2 li:nth-child(12) {
z-index: 13;
}
.preloader-2 li:nth-child(13) {
z-index: 12;
}
.preloader-2 li:nth-child(14) {
z-index: 11;
}
.preloader-2 li:nth-child(15) {
z-index: 10;
}
.preloader-2 li:nth-child(16) {
z-index: 9;
}
.preloader-2 li:nth-child(17) {
z-index: 8;
}
.preloader-2 li:nth-child(18) {
z-index: 7;
}
.preloader-2 li:nth-child(19) {
z-index: 6;
}
.preloader-2 li:nth-child(20) {
z-index: 5;
}
.preloader-2 li:nth-child(21) {
z-index: 4;
}
.preloader-2 li:nth-child(22) {
z-index: 3;
}
.preloader-2 li:nth-child(23) {
z-index: 2;
}
.preloader-2 li:nth-child(24) {
z-index: 1;
}
.preloader-2 li:nth-child(25) {
z-index: 0;
}
.preloader-2 li:nth-child(1) {
animation-delay: 0.1s;
}
.preloader-2 li:nth-child(7) {
animation-delay: 0.3s;
}
.preloader-2 li:nth-child(13) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(19) {
animation-delay: 0.7s;
}
.preloader-2 li:nth-child(24) {
animation-delay: 0.9s;
}
.preloader-2 li:nth-child(2) {
animation-delay: 0.2s;
}
.preloader-2 li:nth-child(8) {
animation-delay: 0.4s;
}
.preloader-2 li:nth-child(14) {
animation-delay: 0.6s;
}
.preloader-2 li:nth-child(20) {
animation-delay: 0.8s;
}
.preloader-2 li:nth-child(3) {
animation-delay: 0.3s;
}
.preloader-2 li:nth-child(9) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(15) {
animation-delay: 0.7s;
}
.preloader-2 li:nth-child(4) {
animation-delay: 0.4s;
}
.preloader-2 li:nth-child(10) {
animation-delay: 0.6s;
}
.preloader-2 li:nth-child(5) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(1) {
animation-delay: 0.1s;
}
.preloader-2 li:nth-child(6) {
animation-delay: 0.2s;
}
.preloader-2 li:nth-child(11) {
animation-delay: 0.3s;
}
.preloader-2 li:nth-child(16) {
animation-delay: 0.4s;
}
.preloader-2 li:nth-child(21) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(7) {
animation-delay: 0.3s;
}
.preloader-2 li:nth-child(12) {
animation-delay: 0.4s;
}
.preloader-2 li:nth-child(17) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(22) {
animation-delay: 0.6s;
}
.preloader-2 li:nth-child(13) {
animation-delay: 0.5s;
}
.preloader-2 li:nth-child(18) {
animation-delay: 0.6s;
}
.preloader-2 li:nth-child(23) {
animation-delay: 0.7s;
}
.preloader-2 li:nth-child(19) {
animation-delay: 0.7s;
}
.preloader-2 li:nth-child(24) {
animation-delay: 0.8s;
}
.preloader-2 li:nth-child(25) {
animation-delay: 0.9s;
}
js
<script>
window.onload = function() {
document.querySelector('.preloader-2').classList.add("preloader-remove");
};
</script>
Прелоадер №5
html
<div class="preloader-3">
<svg viewBox="-2000 -1000 4000 2000">
<path id="inf" d="M354-354A500 500 0 1 1 354 354L-354-354A500 500 0 1 0-354 354z"></path>
<use xlink:href="#inf" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>
</svg>
</div>
css
.preloader-3 svg {
max-width: 25em;
border-radius: 3px;
background: #FFF;
fill: none;
stroke: #BFE2FF;
stroke-linecap: round;
stroke-width: 12%
}
.preloader-3 use {
stroke: #337AB7;
animation: preloader-3-a 2s linear infinite
}
@keyframes preloader-3-a {
to {
stroke-dashoffset: 0px
}
}
js
<script>
window.onload = function() {
document.querySelector('.preloader-3').classList.add("preloader-remove");
};
</script>
Прелоадер №6
html
<div class="preloader-3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css
.preloader-4 {
position: relative;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-gap: 2px;
width: 100px;
height: 100px;
margin: 30px auto;
}
.preloader-4 > div {
position: relative;
width: 100%;
height: 100%;
background: #337AB7;
transform: scale(0);
transform-origin: center center;
animation: preloader-4-anim 2s infinite linear;
}
.preloader-4 > div:nth-of-type(1),
.preloader-4 > div:nth-of-type(5),
.preloader-4 > div:nth-of-type(9) {
animation-delay: 0.4s;
}
.preloader-4 > div:nth-of-type(4),
.preloader-4 > div:nth-of-type(8) {
animation-delay: 0.2s;
}
.preloader-4 > div:nth-of-type(2),
.preloader-4 > div:nth-of-type(6) {
animation-delay: 0.6s;
}
.preloader-4 > div:nth-of-type(3) {
animation-delay: 0.8s;
}
@keyframes preloader-4-anim {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
js
<script>
window.onload = function() {
document.querySelector('.preloader-4').classList.add("preloader-remove");
};
</script>