Как исправить проблему с высотой/видовым портом для спиннер-загрузчика ⇐ CSS

[Гость]

У меня возникли проблемы с добавлением загрузчика Spinner на веб-сайт. Вот контекст:
Итак, у меня проблема: моя компания хочет, чтобы я добавил загрузчик счетчика для веб-сайта, потому что есть слайдер, которому веб-сайт должен загружать все изображения перед поворотом. его в слайдер, но изображения будут загружаться одно за другим вертикально, прежде чем превратиться в горизонтальный слайдер. Это выглядит так неприятно, и мне было поручено добавить загрузчик счетчика, чтобы он работал, пока фон загружает изображения, и отключал счетчик только после его полной загрузки. Первая проблема заключается в том, что счетчик не отображается на правильной высоте, он отображается в самой верхней части страницы, я настроил его так, чтобы он работал в центре веб-страницы, но скорее он будет работать в центре верха. Вторая проблема заключается в том, что я отключил счетчик, но он продолжает вращаться, даже несмотря на то, что существует код для отключения счетчика.
Вот HTML-код для Blade.php:

Код: Выделить всё

Spinner Loader






Loading...






`

Вот код CSS для style.css:

Код: Выделить всё

`.spinner-wrapper {
background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}

.spinner-border {
height: 60px;
width: 60px;
}

`
А вот код JavaScript для script.js:

Код: Выделить всё

`const spinnerWrapperEl = document.querySelector('.spinner-wrapper');

window.addEventListener('load', () => {
spinnerWrapperEl.style.opacity = '0';

setTimeout(() => {
spinnerWrapperEl.style.display = 'none';
}, 200);
});`

Вот скриншот проблемы.

Подробнее здесь: https://stackoverflow.com/questions/781 ... ner-loader