Preloader сердце

<script>
				window.addEventListener('DOMContentLoaded', function() {
		//var preloader = $('#preloader'), // селектор прелоадера
		var preloader = document.getElementById('preloader'), // селектор прелоадера
			//imagesCount = $('img').length, // количество изображений
			imagesCount = document.getElementsByTagName('img').length, // количество изображений
			//dBody = $('body'), //обращаемся к body
			dBody = document.body, //обращаемся к body
			percent = 100 / imagesCount, // количество % на одну картинку
			progress = 0, // точка отсчета
			imgSum = 0, // минимальное количество картинок для запуска прелоадера
			loadedImg = 0, // счетчик загрузки картинок
			//percentCounterSpan = $('.preloader-center-square__couner span'),
			percentCounterSpan = document.getElementsByClassName('preloader-center-square__couner span'),
			percentPartPause = Math.ceil(2000 / imagesCount);


		function img_load() {
			loadedImg++;

			progress = Math.ceil(progress + percent <= 100 ? progress + percent : 100);
			if (progress >= 100 || loadedImg == imagesCount) {

				//загрузка завершена preloader-100 preloader-text-in preloader-fadeout
				setTimeout(function () {
					//$('.preloader').addClass('preloader-100-1');
                    document.getElementsByClassName('preloader')[0].classList.add('preloader-100-1');
					setTimeout(function () {
						//$('.preloader').addClass('preloader-100-2');
                        document.getElementsByClassName('preloader')[0].classList.add('preloader-100-2');
						setTimeout(function () {
									//$('.preloader').addClass('preloader-fadeout');
                                    document.getElementsByClassName('preloader')[0].classList.add('preloader-fadeout');
									setTimeout(function () {
										preloader.remove();
									}, 600);
						}, 600);
					}, 600);
				}, 600);
			}

		}

		function loadImgClone(i) {
			console.log('i=' + i);
			if (i < imagesCount) {

				if (i == 0) {
					var img_copy = new Image();
					img_copy.src = document.images[i].src;
					img_copy.onload = img_load;
					img_copy.onerror = img_load;
					console.log(2);
					loadImgClone(++i);

				} else {

					setTimeout(function () {
						var img_copy = new Image();
						img_copy.src = document.images[i].src;
						img_copy.onload = img_load;
						img_copy.onerror = img_load;
						console.log(3);
						loadImgClone(++i);
					}, 200);
				}

			} else {

			}
		}

		if (sessionStorage) {
			if (imagesCount >= imgSum && !sessionStorage.getItem('load') ) {
				setTimeout(function () {
					sessionStorage.setItem('load', 'true')
					//preloader.addClass('preloader-vis');
					preloader.classList.add('preloader-vis');
setTimeout(function () {
					//$('.preloader').addClass('preloader-100-1');
                    document.getElementsByClassName('preloader')[0].classList.add('preloader-100-1');
					setTimeout(function () {
						//$('.preloader').addClass('preloader-100-2');
                        document.getElementsByClassName('preloader')[0].classList.add('preloader-100-2');
						setTimeout(function () {
									//$('.preloader').addClass('preloader-fadeout');
                                    document.getElementsByClassName('preloader')[0].classList.add('preloader-fadeout');
									setTimeout(function () {
										preloader.remove();
									}, 600);
						}, 1600);
					}, 600);
				}, 600);
					//loadImgClone(0);
					//
					/*	for (var i = 0; i < imagesCount; i++) { // создаем клоны изображений
							var img_copy = new Image();
							img_copy.src = document.images[i].src;
							img_copy.onload = img_load;
							img_copy.onerror = img_load;
						}*/
				}, 200);

			} else {
				preloader.remove();
			}
		}
			});
	</script>
	
	
	
		<?php wp_body_open(); ?>

	<script>
		window.addEventListener('DOMContentLoaded', function() {
		  if (sessionStorage.getItem('load') ) {
			//$('#preloader').removeClass('preloader-vis');
              if (document.getElementById('preloader')){
                  document.getElementById('preloader').classList.remove('preloader-vis');
              }
		  }
			});
	</script>

	<div class="header-placeholder"></div>
	
	<div class="preloader ws-firsttop" id="preloader">
		<div class="preloader-center">
			<div class="preloader-center-square">
				<div class="preloader-center-square__logo">
					<svg width="70" height="66" viewBox="0 0 70 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.9979 5.71615C54.3033 -14.1286 102.571 20.5975 34.9979 65.2505C-32.5752 20.6019 15.6925 -14.1286 34.9979 5.71615Z" fill="#F31E52"/>
</svg>


				</div>
			</div>
		</div>
	</div>
  
  <style>
  .preloader,
.preloader * {
	-webkit-transition-duration: .6s;
	-moz-transition-duration: .6s;
	-o-transition-duration: .6s;
	transition-duration: .6s
}

.preloader-center-square {
	opacity: 0
}

.preloader-vis .preloader-center-square {
	opacity: 1
}

.preloader {
	background: #2e2e2e
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background-color: #101010
}

.preloader-center-square {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 69px;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.preloader-center-square__couner {
	z-index: 1;
	position: absolute
}

.preloader-center-square__logo {
	width: 64px;
	height: 64px;
	position: absolute
}

.preloader-center-square__logo svg {
	width: 100%;
	height: auto;
	display: block;
	-webkit-animation: zoom-in-out 1s ease-in-out 0s infinite normal;
	-moz-animation: zoom-in-out 1s ease-in-out 0s infinite normal;
	-o-animation: zoom-in-out 1s ease-in-out 0s infinite normal;
	animation: zoom-in-out 1s ease-in-out 0s infinite normal
}

.preloader-center-square span {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: #fff
}

.preloader-center-square svg {
	opacity: 1
}

@-webkit-keyframes fadeInLeftPreloader {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-moz-keyframes fadeInLeftPreloader {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20px, 0, 0);
		-moz-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none
	}
}

@-o-keyframes fadeInLeftPreloader {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-o-transform: none;
		transform: none
	}
}

@keyframes fadeInLeftPreloader {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20px, 0, 0);
		-moz-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		transform: none
	}
}

.preloader-100-1 .preloader-center-square {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	width: 64px;
	height: 64px
}

.preloader-100-2 svg {
	-webkit-transition-duration: .8s;
	-moz-transition-duration: .8s;
	-o-transition-duration: .8s;
	transition-duration: .8s;
	opacity: 1
}

.preloader-fadeout {
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	-o-transition-duration: .3s;
	transition-duration: .3s;
	opacity: 0
}

@-webkit-keyframes zoom-in-out {
	0% {
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-ms-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}
	100% {
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-moz-keyframes zoom-in-out {
	0% {
		-ms-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-ms-transform: scale(1.2);
		-moz-transform: scale(1.2);
		transform: scale(1.2)
	}
	100% {
		-ms-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1)
	}
}

@-o-keyframes zoom-in-out {
	0% {
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2)
	}
	100% {
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes zoom-in-out {
	0% {
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-ms-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2)
	}
	100% {
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}
}
  </style>