- +7(962)141-55-43
- @wpprog
- emel8881
- serj-post@mail.ru
Как сделать прелоадер для части сайта
Если сайт грузится слишком долго, то разработчики часто используют прелоадеры. Обычно они позволяют скрывать всю страницу до ее полной загрузки. А как быть, если нам нужно использовать прелоадер не на всей странице целиком, а только на каком-то определённом блоке. В этой статье описано моё решение этой задачи.
HTML-код
<section id="block">
<div id="content">
<h1>Здесь Ваш контент</h1>
<p>Как можно сделать прелоадер на отдельный блок, а не на сайт целиком</p>
<button>Отлично!</button>
<div id="preloader">
<span style="padding-top:120px;">Загрузка...</span>
</div>
</div>
</section>
СSS
#content {
position: relative;
text-align: center;
height: auto;
width: 350px;
border: 1px solid green;
padding: 20px 0;
}
#preloader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('https://wp-prog.ru/wp-content/uploads/2021/04/Rainbow.gif');
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
#block {
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
jQuery
jQuery('#preloader').delay(1000).fadeOut(2500);
Ну и конечно же, не забываем предварительно подключить jQuery.