Cacher is the code snippet organizer for pro developers

// Create loader
add_action('wp_head', function(){
	if (is_front_page()) {
		?>
			<style>
				#loaderWrapper{
					position:fixed;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					display: flex;
					background: #111315;
					z-index: 999;
					transition: opacity .5s;
				}

				#loaderWrapper.end {
					opacity: 0;
				}

				#loader {
					z-index: 1;
					width: 232px;
					height: 404px;
					background-image: url(<?php echo content_url() . '/uploads/2020/03/Tyler-C-Tattoo-Logo-Footer-1.svg' ?>);
					background-repeat: no-repeat;
					background-size: contain;
					margin: auto;

					-webkit-animation: spin 2s linear infinite;
					animation: spin 2s linear infinite;
				}

				@-webkit-keyframes spin {
					0% { -webkit-transform: scale(1.0); }
					50% { -webkit-transform: scale(1.05); }
					100% { -webkit-transform: scale(1.1)); }
				}

				@keyframes spin {
					0% { transform: scale(1.0); }
					50% { transform: scale(1.05); }
					100% { transform: scale(1.1)); }
				}
			</style>
		<?php
	}
});

add_action('wp_body_open', function() {
	if (is_front_page()) {
		?>
			<div id="loaderWrapper"><div id="loader"></div></div>
		<?php
	}
});

add_action('wp_footer', function() {
	if (is_front_page()) {
		?>
			<script>
					window.addEventListener('load', function() {
						let loaderWrapper = document.getElementById('loaderWrapper');
						loaderWrapper.classList.add('end');

						setTimeout(function() {
							loaderWrapper.style.display = 'none';	
						}, 500);
					});
			</script>
		<?php
	}
});