Попробую кратко продублировать здесь ответы на три вопроса о прелоадере / спиннере, которые нередки у начинающих вебмастеров. 

Кстати, можно взглянуть и в сторону 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>

Вот, собственно, и вся премудрость.