Как сделать прелоадер для части сайта

Если сайт грузится слишком долго, то разработчики часто используют прелоадеры. Обычно они позволяют скрывать всю страницу до ее полной загрузки. А как быть, если нам нужно использовать прелоадер не на всей странице целиком, а только на каком-то определённом блоке. В этой статье описано моё решение этой задачи.

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.

Если у Вас есть какие-либо вопросы, оставьте свой комментарий:

Как сделать прелоадер для части сайта

Добавить комментарий Отменить ответ