Divi FilterGrid - Custom Loader - Pure CSS Example

functions.php

/* DFG CUSTOM LOADER - PURE CSS PACMAN EXAMPLE 
*  CREDIT: https://codepen.io/Krish1234/pen/qBdXLmL
*/
function dpdfg_custom_loader() {
    ob_start();
    ?>
    <div class="dp-dfg-loader">
		<div class="la-pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<!-- THE FOLLOWING CSS COULD BE MOVED TO YOUR CHILD THEME'S STYLESHEET -->
	<style>
	.dp-dfg-loader {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -48px;
		margin-left: -48px;
		height: 100px;
		width: 100px;
	}


	.la-pacman,
	.la-pacman > div {
		position: relative;
		box-sizing: border-box;
		line-height: 1em;
	}
	.la-pacman {
		top: 96px;
		transform:translate(-50%,-50%);
		display: block;
		font-size: 0;
		color: #f3c130;
	}

	.la-pacman > div {
		display: inline-block !important;
		float: none;
		background-color: currentColor;
		border: 0 solid currentColor;
	}
	.la-pacman {
		width: 96px;
		height: 96px;
	}
	.la-pacman > div:nth-child(1),
	.la-pacman > div:nth-child(2) {
		width: 0;
		height: 0;
		background: transparent;
		border-style: solid;
		border-width: 48px;
		border-right-color: transparent;
		border-radius: 100%;
		animation: pacman-rotate-half-up .5s 0s infinite;
	}

	.la-pacman > div:nth-child(2) {
		margin-top: -96px;
		animation-name: pacman-rotate-half-down;
	}
	.la-pacman > div:nth-child(3),
	.la-pacman > div:nth-child(4),
	.la-pacman > div:nth-child(5),
	.la-pacman > div:nth-child(6) {
		position: absolute;
		top: 50%;
		left: 200%;
		width: 24px;
		height: 24px;
		border-radius: 100%;
		opacity: 0;
		animation: pacman-balls 2s 0s infinite linear;
	}
	.la-pacman > div:nth-child(3) {
		 animation-delay: -1.44s;
	}
	.la-pacman > div:nth-child(4) {
		 animation-delay: -1.94s;
	}
	.la-pacman > div:nth-child(5) {
		 animation-delay: -2.44s;
	}
	.la-pacman > div:nth-child(6) {
		 animation-delay: -2.94s;
	}
	/*
	 * Animations
	 */

	@keyframes pacman-rotate-half-up {
		0%,
		100% {
			  transform: rotate(270deg);
		}
		50% {
			  transform: rotate(360deg);
		}
	}

	@keyframes pacman-rotate-half-down {
		0%,
		100% {
			  transform: rotate(90deg);
		}
		50% {
			 transform: rotate(0deg);
		}
	}

	@keyframes pacman-balls {
		0% {
			left: 200%;
			opacity: 0;
			 transform: translateY(-50%);
		}
		5% {
			opacity: .5;
		}
		66% {
			opacity: 1;
		}
		67% {
			opacity: 0;
		}
		100% {
			left: 0;
			transform: translateY(-50%);
		}
	}
	</style>
  <!-- THE CSS ABOVE COULD BE MOVED TO YOUR CHILD THEME'S STYLESHEET -->
    <?php
    return ob_get_clean();
}

add_filter('dpdfg_custom_loader', 'dpdfg_custom_loader');