Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Divi FilterGrid - Custom Loader - Pure CSS Example
/* 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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment