.preloader { display: none; /* Скрыт по умолчанию */ width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
Пример PRELOADERа
$(document).ready(function () { const myAudio = document.getElementById("bg-sound"); // Аудио элемент const preloader = $("#rec929547601"); // Блок прелоадера const fadeDuration = 1000; // Длительность анимации (1 секунда) let wasPlaying = false; // Флаг для отслеживания состояния аудио // Устанавливаем начальную громкость myAudio.volume = 0.4; // Блокируем прокрутку страницы при загрузке $("html").addClass("noscroll"); // Отслеживаем клик по кнопке с классом button_close $(".button_close").on("click", function () { myAudio.play().catch((err) => console.error("Ошибка воспроизведения аудио:", err)); preloader.addClass("slide-up"); // Убираем блок прелоадера из DOM после завершения анимации setTimeout(() => { preloader.remove(); $("html").removeClass("noscroll"); }, fadeDuration); }); // Зацикливание музыки myAudio.addEventListener("ended", function () { myAudio.currentTime = 0; myAudio.play(); }); // Остановка и возобновление музыки при изменении видимости страницы document.addEventListener("visibilitychange", function () { if (document.hidden) { if (!myAudio.paused) { wasPlaying = true; myAudio.pause(); } } else { if (wasPlaying) { myAudio.play(); wasPlaying = false; } } }); });
Made on
Tilda