Попробую кратко продублировать здесь ответы на три вопроса о прелоадере / спиннере, которые нередки у начинающих вебмастеров.
Кстати, можно взглянуть и в сторону fakeloader.js.
Как правильно установить spinner на страницу сайта? В Сети огромное количество руководств, но редко кто-то рассказывает про необходимый для спиннера javascript (пример - доки Bootstrap любых версий). Результат - preloader очень красиво крутится-вертится, но не работает.
Все несложно.
Итак, оптимально (но не обязательно) расположить этот div сразу после открывающего тега body странички:
<div class="spinner-grow text-secondary" id="spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
А где-нибудь внизу, перед закрывающим body, вешаем скрипт. Классическое решение:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('body > .spinner-grow').classList.add('d-none');
document.querySelector('.masthead').classList.remove('d-none');
});
</script>
Кстати, для начала вы можете поэкспериментировать таким образом:
<script>
window.setTimeout(function(){
document.querySelector('body > .spinner-grow').classList.add('d-none');
document.querySelector('.masthead').classList.remove('d-none');
}, 800);
</script>
Это был чистый javascript; то же самое на jQuery:
<script>
$(function(){
$('body > .spinner-grow').addClass('d-none');
$('.masthead').removeClass('d-none')l
});
</script>
Теперь добавим класс d-none к контенту странички, загрузку которого мы хотим прикрыть спиннером. Например:
<div class="masthead d-none">
<div class="content_lazy">
<div id='lazy'></div>
</div>
<div id="tsparticles"></div>
</div>
Работает?
Как расположить spinner/preloader по центру странички?
<style>
#spinner {
position: absolute;
top: 50%;
left: 50%;
}
</style>
Как вариант.
Если у меня на страничке сайта - слева (или справа) сайдбар, как отцентровать spinner без учета ширины сайдбара (который, кстати, может исчезать на мобильных устройствах), просто по центру родительского контейнера?
Например, так:
<style>
.parent_div {
position: relative;
min-height: 100vh; // на случай, если не центруется по-вертикали.
}
#spinner {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
</style>
Вот, собственно, и вся премудрость.