src/html/_preloader.htm - master - Slav468/test

src/html/_preloader.htm
125 строк4 KB
Slav468
feat: init commit
15 июл 2024, 14:31
15 июл 2024, 14:310fdfc9b
 <!-- Документація: https://template.fls.guru/template-docs/modul-preloader.html -->
<div id="fls-preloader">
	<!-- Скріпт прелоадера -->
	<script>
		function preloader() {
			const preloaderImages = document.querySelector('[data-preloader]') ? document.querySelectorAll('[data-preloader] img') : document.querySelectorAll('img');
			const preloaderContainer = document.querySelector('#fls-preloader');
			if (preloaderImages.length) {
				const preloaderStyleTemplate =`
				<style>
					* {
						padding: 0px;
						margin: 0px;
						border: 0px;
						box-sizing: border-box;
					}
					/* Головний блок */
					.fls-preloader{
						pointer-events: none;
						z-index: -1;
						position: fixed;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						display: flex;
						justify-content:center;
						align-items: center;
					}
					/* Блок з елементами */
					.fls-preloader__body{
						padding: 0.93rem;
						max-width: 31.25rem;
						display: flex;
						flex-direction: column;
					}
					/* Блок з лічильником */
					.fls-preloader__counter{
						font-size: 10rem;
					}
					/* Прогресбар */
					.fls-preloader__line{}
					/* Лінія прогресбару */
					.fls-preloader__line span{
						display: inline-block;
						transition: width 0.2s ease;
						height: 0.8rem;
						background-color: #7A956B;
					}
					.lock body{
						overflow: hidden;
						touch-action: none;
						overscroll-behavior: none;
					}
					.loading body>*:not(.fls-preloader){
						opacity: 0;
						visibility: hidden;
					}
					.loaded body>*:not(.fls-preloader){
						transition: opacity 0.5s ease 0s;
						opacity: 1;
						visibility: visible;
					}
				</style>`;
				
				document.head.insertAdjacentHTML("beforeend",preloaderStyleTemplate);

				const preloaderTemplate =`
					<div class="fls-preloader">
						<div class="fls-preloader__body">
							<div class="fls-preloader__counter">0%</div>
							<div class="fls-preloader__line"><span></span></div>
						</div>
					</div>`;
				document.body.insertAdjacentHTML("beforeend",preloaderTemplate);

				const
					preloader = document.querySelector('.fls-preloader'),
					showPecentLoad = document.querySelector('.fls-preloader__counter'),
					showLineLoad = document.querySelector('.fls-preloader__line span'),
					htmlDocument = document.documentElement;

				let imagesLoadedCount = counter = progress = 0;
				
				htmlDocument.classList.add('loading');
				htmlDocument.classList.add('lock');

				preloaderImages.forEach(preloaderImage => {
					const imgClone = document.createElement('img');
					if (imgClone) {
						imgClone.onload = imageLoaded;
						imgClone.onerror = imageLoaded;
						preloaderImage.dataset.src ? imgClone.src = preloaderImage.dataset.src : imgClone.src = preloaderImage.src;
					}
				});
				function setValueProgress(progress) {
					showPecentLoad ? showPecentLoad.innerText = `${progress}%`: null;
					showLineLoad ? showLineLoad.style.width = `${progress}%` : null;
				}
				showPecentLoad ? setValueProgress(progress) : null;

				function imageLoaded() {
					imagesLoadedCount++;
					progress = Math.round((100 / preloaderImages.length) * imagesLoadedCount);
					const intervalId = setInterval(() => {
						counter >= progress ? clearInterval(intervalId) : setValueProgress(++counter);
						counter >= 100 ? addLoadedClass() : null;
					}, 10);
				}
				function addLoadedClass() {
					htmlDocument.classList.add('loaded');
					htmlDocument.classList.remove('lock');
					htmlDocument.classList.remove('loading');
					setInterval(() => {
						preloader.remove();
						preloaderContainer.remove();
					}, 500);
				}
			}else{
				preloaderContainer.remove();
			}
		}
		preloader();
	</script>
</div>