JavaScript и jQuery / Прелоадер страницы сайта на css, javascript и gif

Заметка создана: 02 октября 2024 г.
Образец GIF файла для прелоадера.
Файл большой. Лучше всего использовать небольшие GIF-ки, чтобы загружались быстро.
Добавить в код сайта сразу после тега <body>
<div id="preloader" class="preloader_image"></div>

JavaScript / jQuery

document.addEventListener( 'DOMContentLoaded', function () {
document.querySelector( '#preloader' ).classList.add( 'preloader_image' );
setTimeout( () => {
document.querySelector( '#preloader' ).classList.add( 'hidePreload' );
setTimeout( () => {
console.log( 'remove preloader' );
jQuery( '#preloader' ).remove();
}, 3500 );
}, 3000 );
} );

Стили CSS

.preloader_image {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
margin:0 auto;
background: #fff url(/images/preload.gif) no-repeat 50% 0;
background-size:100%;
overflow: hidden;
z-index: 1001;
Javascript