(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Don’t want to make from scratch? Get the template instead 🙂
Introduction – We make 10 Animated Preloaders for Elementor that use GSAP and PACE JS
In this tutorial, we are learning to make preloaders for your website that look clean and also keep user retention until the page loads. Only use preloaders if necessary. Please watch above tutorial for atleast the first preloader, as I get into details of how the code works and you can translate the knowledge you gained there to any of the rest 9 preloaders.
Overview:
Most of the preloaders here have 2 variables, isGsapFinished & isProgressFinished. These are set false by default, as soon as GSAP animation is completed we set isGsapFinished to True and as soon as page is loaded we set isProgressFinished to true. This makes sure that the preloader is only hidden, if both animation & page load is completed.
If you wish to hide the preloader even if the animation is not completed and only page is loaded, then set the “isGsapFinished = false” to “isGsapFinished = true“.
#1 – Simple Preloader
- dm-preloader-1 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-text-1 is the CSS class of text. (Select HTML tag as span)
- dm-preloader-bar-1 is the CSS class of the progress bar container.
- dm-preloader-counter is the CSS class of the counter heading widget. (Select HTML tag as p)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<style>
.dm-preloader-1, .dm-preloader-text-1 {
transition: none !important;
}
.dm-preloader-inactive {
display: none;
}
</style>
<script>
const dmPreloader1 = document.querySelector('.dm-preloader-1');
const dmPreloaderBar1 = document.querySelector('.dm-preloader-bar-1')
// Set variable to check if gsap animation and page loading is done or not
let isGsapFinished1 = false;
let isProgressFinished1 = false;
// Animation Timeline
const dmPreloader1TL = gsap.timeline({
//On Animation complete, mark it complete
onComplete: () => {
isGsapFinished1 = true;
onPreloader1Completion();
}
});
dmPreloader1TL.to('.dm-preloader-text-1 span', {
letterSpacing: '30px',
duration:2,
ease:'power4.inOut'
});
//Using pace js for load progress
Pace.on("progress", function (percent) {
const preloaderText = document.querySelector(".dm-preloader-counter .elementor-heading-title");
preloaderText.textContent = `${Math.floor(percent)}%`;
dmPreloaderBar1.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished1 = true;
onPreloader1Completion();
});
//if both gsap and page loading is complete then only remove the preloader
function onPreloader1Completion() {
if(isProgressFinished1 && isGsapFinished1) {
//Exit Animation
gsap.to('.dm-preloader-1', {
y:'-150vh',
duration:1.5,
ease:'power3.out',
delay:0.1,
//On complete remove the preloader
onComplete: () => {
dmPreloader1.classList.add('dm-preloader-inactive');
}
});
}
};
</script>
#2 – Sling Text Preloader
- dm-preloader-2 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-text-2 is the CSS class of text. (Select HTML tag as p)
- dm-preloader-bar-2is the CSS class of the progress bar container.
- dm-preloader-element-2 is the CSS class of the final element, we have used image in template and tutorial above.
- dm-preloader-counter-2 is the CSS class of the counter heading widget. (Select HTML tag as p)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-text-2 {
letter-spacing: 0px;
display: none;
}
.dm-preloader-element-2 {
display: none;
}
.dm-preloader-2 {
transition: none !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
</style>
<script>
const dmPreloaderText2 = document.querySelectorAll('.dm-preloader-text-2');
const dmPreloaderElement2 = document.querySelector('.dm-preloader-element-2');
const dmPreloader2 = document.querySelector('.dm-preloader-2');
let isGsapFinished2 = false;
let isProgressFinished2 = false;
//LetterSpacing for responsive sizes
const getLetterSpacing = () => {
const screenWidth = window.innerWidth;
if (screenWidth >= 1025) {
return "30px"; // Desktop
} else if (screenWidth >= 768 && screenWidth <= 1024) {
return "20px"; // Tablet
} else {
return "5px"; // Mobile
}
};
//Animation Timeline
const dmPreloader2TL = gsap.timeline({
onComplete: () => {
isGsapFinished2 = true;
onPreloader2Completion();
}
});
//Loop through all text and do the animations
dmPreloaderText2.forEach((dmText2) => {
dmPreloader2TL.to(dmText2, {
onStart: () => {
dmText2.style.display = "block";
},
letterSpacing: getLetterSpacing(),
duration:1,
ease: CustomEase.create("custom", "M0,0 C0,0 0,1.018 0.497,1.019 1,1.019 1,0 1,0 "),
onComplete: () => {
dmText2.style.display = 'none';
}
});
});
dmPreloader2TL.from(dmPreloaderElement2, {
onStart: () => {
dmPreloaderElement2.style.display = "block";
},
transform:'scale(0)',
duration:0.5,
ease: CustomEase.create("custom", "M0,0 C0.098,0.247 0.298,1.49 1,0.8 ")
});
//Animate the progress bar with pace js
const dmPreloaderBar2 = document.querySelector('.dm-preloader-bar-2');
Pace.on("progress", function (percent) {
const preloaderText2 = document.querySelector(".dm-preloader-counter-2 .elementor-heading-title");
preloaderText2.textContent = `${Math.floor(percent)}%`;
dmPreloaderBar2.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished2 = true;
onPreloader2Completion();
});
//if both gsap and page loading is complete then only remove the preloader
function onPreloader2Completion() {
if(isProgressFinished2 && isGsapFinished2) {
//Exit Animation
gsap.to('.dm-preloader-2', {
clipPath: 'polygon(0 0, 0% 0, 0% 100%, 0% 100%)',
duration:1,
ease:'power4.out',
delay:1,
//On complete remove the preloader
onComplete: () => {
dmPreloader2.style.display = 'none';
}
});
}
};
</script>
#3 – Color Text Reveal Preloader
- dm-preloader-3 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-empty-text-3 is the CSS class of the first text, also make its color to transparent. You can type an random word there, like “Transparent”.
- dm-preloader-text-3 is the CSS class of all texts except the last one. (Select HTML tag as p)
- dm-preloader-bar-3is the CSS class of the progress bar container.
- dm-preloader-element-3 is the CSS class of the final text.
- dm-preloader-counter-3 is the CSS class of the counter heading widget. (Select HTML tag as p)
- Change the text “black” in all linear-gradients below to choose your custom color.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-3 {
transition: none !important;
}
.dm-preloader-text-3 {
display: none;
transition: none !important;
background-image: linear-gradient(90deg, transparent 50%, black 50%);
background-position: 100% 100%;
background-size: 200%;
}
.dm-preloader-element-3 {
display: none;
transition: none !important;
background-image: linear-gradient(90deg, transparent 50%, black 50%);
background-position: 100% 100%;
background-size: 200%;
}
.dm-preloader-empty-text-3 {
background-image: linear-gradient(90deg, transparent 50%, black 50%);
background-position: 0% 100%;
background-size: 200%;
}
</style>
<script>
const dmPreloaderText3 = document.querySelectorAll('.dm-preloader-text-3');
const dmPreloader3 = document.querySelector('.dm-preloader-3');
const dmPreloader3EmptyText = document.querySelector('.dm-preloader-empty-text-3');
let isGsapFinished3 = false;
let isProgressFinished3 = false;
//Define Animation Timeline
const dmPreloader3TL = gsap.timeline({
onComplete: () => {
isGsapFinished3 = true;
onPreloader3Completion();
}
});
//Make Empty Text Animation
dmPreloader3TL.to(dmPreloader3EmptyText, {
backgroundPosition:'100% 100%',
duration:1,
ease:'power4.out',
onComplete: () => {
dmPreloader3EmptyText.style.display = "none";
}
});
//Loop and display text in order
dmPreloaderText3.forEach((dmText3) => {
dmPreloader3TL.to(dmText3, {
onStart: () => {
dmText3.style.display = "block";
},
backgroundPosition:'0% 100%',
duration:2,
ease: CustomEase.create("custom", "M0,0,C0,0,0.278,0.991,0.551,0.991,0.774,0.991,1,0,1,0"),
onComplete: () => {
dmText3.style.display = "none";
}
});
});
const dmPreloader3Element = document.querySelector('.dm-preloader-element-3');
// Animation for the final text/element
dmPreloader3TL.to(dmPreloader3Element, {
onStart: () => {
dmPreloader3Element.style.display = "block";
},
backgroundPosition:'0% 100%',
duration:2,
ease: 'power2.out'
});
//Animate the progress bar with pace js
const dmPreloaderBar3 = document.querySelector('.dm-preloader-bar-3');
Pace.on("progress", function (percent) {
const preloaderText3 = document.querySelector(".dm-preloader-counter-3 .elementor-heading-title");
preloaderText3.textContent = `${Math.floor(percent)}%`;
dmPreloaderBar3.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished3 = true;
onPreloader3Completion();
});
//if both gsap and page loading is complete then only remove the preloader
function onPreloader3Completion() {
if(isProgressFinished3 && isGsapFinished3) {
//Exit Animation
gsap.to(dmPreloader3, {
opacity:0,
duration:2,
//On complete remove the preloader
onComplete: () => {
dmPreloader3.style.display = 'none';
}
});
}
};
</script>
#4 – Counter Fill Preloader
- dm-preloader-4 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-counter-4 is the CSS class of the counter heading widget. (Select HTML tag as p)
- Change the text “white” in –dm-counter-color-4: white to choose you desired fill color.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
:root {
--dm-counter-color-4 : white;
}
.dm-preloader-counter-4 p
{
background-image: linear-gradient(180deg, transparent 50%, var(--dm-counter-color-4) 50%);
background-position: 0% 0%;
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<script>
const dmPreloader4 = document.querySelector('.dm-preloader-4');
const dmPreloaderCounter4 = document.querySelector('.dm-preloader-counter-4 .elementor-heading-title');
Pace.on("progress", function (percent) {
dmPreloaderCounter4.style.backgroundPosition = `0% ${percent}%`;
dmPreloaderCounter4.textContent = `${Math.floor(percent)}%`;
});
Pace.on('done', function() {
isProgressFinished4 = true;
onPreloader4Completion();
});
function onPreloader4Completion() {
//Animation Timeline
const dmPreloader4TL = gsap.timeline({
onComplete: () => {
dmPreloader4.style.display = 'none';
}
});
dmPreloader4TL.to(dmPreloaderCounter4, {
y:'100vh',
opacity:0,
duration:2,
ease:'power3.inOut'
});
dmPreloader4TL.to(dmPreloader4, {
opacity:0,
duration:1,
ease:'power3.out'
});
};
</script>
#5 – Logo With Tagline Reveal Preloader
- dm-preloader-5 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-5-color2 is the CSS class of the 2nd color container that shows on exit animation. Make it 100dvh too.
- dm-preloader-5-content is the CSS class of the container that has both logo image and the tagline container.
- dm-preloader-5-logo is the CSS class of the image widget that has our logo.
- dm-preloader-5-tagline is the CSS class of the heading widget inside the tagline container. Make sure to give tagline container overflow:hidden.
- dm-preloader-counter-5 is the CSS class of the counter heading widget. (Select HTML tag as p)
- dm-preloader-bar-5 is the CSS class of the progress bar container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-5-tagline {
/*clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);*/
}
.dm-preloader-5, .dm-preloader-5-color2 {
transition: none !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.dm-preloader-5-content {
transition: none !important;
}
</style>
<script>
let isGsapFinished5 = false;
let isProgressFinished5 = false;
const dmPreloader5TL = gsap.timeline({
onComplete: () => {
isGsapFinished5 = true;
onPreloader5Completion();
}
});
dmPreloader5TL.from('.dm-preloader-5-logo', {
delay:1,
transform:'scale(0)',
duration:0.5,
ease: CustomEase.create("custom", "M0,0 C0,1 0.598,1.269 1,1 ")
});
dmPreloader5TL.to('.dm-preloader-5-logo', {
delay:0.5,
x:'-60%',
duration:0.7,
rotate:'-360deg',
ease: CustomEase.create("custom", "M0,0 C0,0.224 0.11,0.577 0.343,0.797 0.523,0.968 0.746,1.108 1,1 ")
});
dmPreloader5TL.from('.dm-preloader-5-tagline', {
x:'-100%',
duration:0.7,
ease: CustomEase.create("custom", "M0,0 C0,0.224 0.11,0.577 0.343,0.797 0.523,0.968 0.746,1.108 1,1 "),
onComplete: () => {
gsap.to('.dm-preloader-5-content', {
delay:1,
transform:'scale(0.98)',
duration:0.5,
yoyo:true,
repeat:-1
});
}
},'-=0.7');
const dmPreloaderBar5 = document.querySelector('.dm-preloader-bar-5');
Pace.on("progress", function (percent) {
const preloaderText5 = document.querySelector(".dm-preloader-counter-5 .elementor-heading-title");
preloaderText5.textContent = `${Math.floor(percent)}%`;
dmPreloaderBar5.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished5 = true;
onPreloader5Completion();
});
function onPreloader5Completion() {
if(isProgressFinished5 && isGsapFinished5) {
dmPreloader5TL.to('.dm-preloader-5', {
delay:2,
clipPath: 'polygon(0 0, 0% 0, 0% 100%, 0% 100%)',
duration:2,
ease:'power3.out'
});
dmPreloader5TL.to('.dm-preloader-5-color2', {
clipPath: 'polygon(0 0, 0% 0, 0% 100%, 0% 100%)',
duration:2,
ease:'power3.out'
},"-=1.8");
}
}
</script>
#6 – Images Reveal Preloader
- dm-preloader-6 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-6-text is the CSS class of the heading text. (Select HTML tag as p)
- dm-preloader-bar-wrapper-6 is the CSS class of the MAIN preloader container. I have given it position absolute, bottom offset is calc(50% – 30px)
- dm-preloader-bar-6 is the CSS class of the preloader bar container.
- dm-preloader-6-image is the CSS class of all the image containers. Alternate containers will reveal by top and bottom.
- dm-preloader-counter-6 is the CSS class of the counter heading widget. (Select HTML tag as p)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-6-image {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: none !important;
}
.dm-preloader-6 {
transition: none !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.dm-preloader-bar-wrapper-6 {
transition: none !important;
}
</style>
<script>
let isGsapFinished6 = false;
let isProgressFinished6 = false;
const dmPreloader6TL = gsap.timeline({
onComplete: () => {
isGsapFinished6 = true;
onPreloader6Completion();
}
});
const dmPreloader6Images = document.querySelectorAll('.dm-preloader-6-image');
dmPreloader6TL.from('.dm-preloader-6-text', {
y:-100,
opacity:0,
duration:1,
ease:'power2.out'
});
dmPreloader6Images.forEach((imgElement, index) => {
if(index % 2 === 0) {
dmPreloader6TL.from(imgElement, {
clipPath: 'polygon(0 0, 100% 0, 100% 0%, 0% 0%)',
duration:2,
ease:'power4.out'
},0);
}
else {
dmPreloader6TL.from(imgElement, {
clipPath: 'polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)',
duration:2,
ease:'power4.out'
},0);
}
});
const dmPreloaderBar6 = document.querySelector('.dm-preloader-bar-6');
Pace.on("progress", function (percent) {
const preloaderText6 = document.querySelector(".dm-preloader-counter-6 .elementor-heading-title");
preloaderText6.textContent = `${Math.floor(percent)}%`;
dmPreloaderBar6.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished6 = true;
onPreloader6Completion();
});
function onPreloader6Completion() {
if(isProgressFinished6 && isGsapFinished6) {
setTimeout(() => {
dmPreloader6TL.reverse();
gsap.to('.dm-preloader-bar-wrapper-6', {
width:'0%',
duration:1,
opacity:0,
ease:'power2.out',
delay:1.5
});
},500);
dmPreloader6TL.eventCallback("onReverseComplete", () => {
gsap.to('.dm-preloader-6', {
clipPath:'polygon(0 0, 100% 0, 100% 0%, 0% 0%)',
duration: 1,
ease:'power4.out'
});
});
}
}
</script>
#7 – Radial Ripple Color Preloader
- dm-preloader-7 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-7-content is the CSS class of the container that contains all our elements.
- dm-progress-circle-7 is the CSS class of the radial progress circle container that is inside dm-preloader-7-content container. Make sure to give it position absolute, height 100% and also make padding to 0.
- dm-preloader-image-7 is the CSS class of the logo image.
- –ripplecolor – Add your own ripple color here, use RGBA and make the last A value to your desired opacity.
- –rippleendcolor – Make this same as above color but make the last value, i.e A to 0.
- You can easily change ripple speed by changing the “2s” to your desired value in the animation property in the code.
- In the code below, in script section, you can choose the trail color, color and stroke width to your desired value.
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.6.1/progressbar.min.js" integrity="sha512-7IoDEsIJGxz/gNyJY/0LRtS45wDSvPFXGPuC7Fo4YueWMNOmWKMAllEqo2Im3pgOjeEwsOoieyliRgdkZnY0ow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-7 {
--ripplecolor: rgba(189, 142, 210, 0.3);
--rippleendcolor: rgba(189, 142, 210, 0);
transition: none !important;
clip-path: circle(100% at center);
}
.dm-preloader-7-content svg path {
/*
stroke-linecap: round; /* Force rounded edges */
}
.dm-preloader-7-content {
aspect-ratio: 1;
}
.dm-preloader-7-content:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
border-radius: 50%;
animation: ripple 2s linear infinite;
}
@keyframes ripple {
0% {
box-shadow:
0 0 0 0 var(--ripplecolor),
0 0 0 30px var(--ripplecolor),
0 0 0 60px var(--ripplecolor),
0 0 0 90px var(--ripplecolor);
}
100% {
box-shadow:
0 0 0 30px var(--ripplecolor),
0 0 0 60px var(--ripplecolor),
0 0 0 90px var(--ripplecolor),
0 0 0 120px var(--rippleendcolor);
}
}
</style>
<script>
var progressBar =
new ProgressBar.Circle('.dm-progress-circle-7', {
color: 'rgba(189, 142, 210, 1)', //progressbar color
trailColor: '#0000001F', //progress bar bg color
strokeWidth: 2,
// svgStyle: { strokeLinecap: 'round' }
});
gsap.from('.dm-preloader-image-7', {
transform:'scale(0)',
duration:0.5,
ease:'power3.out'
});
//Animate the progress bar with pace js
const dmPreloaderBar7 = document.querySelector('.dm-preloader-bar-7');
Pace.on("progress", function (percent) {
progressBar.animate(percent/100);
});
Pace.on('done', function() {
isProgressFinished7 = true;
onPreloader7Completion();
});
function onPreloader7Completion() {
gsap.to('.dm-preloader-7', {
delay:1,
clipPath:'circle(0% at center)',
duration:2,
ease:'power3.out'
})
}
</script>
#8 – Black and White Reveal Preloader (Works Better for Black and White)
- dm-preloader-8 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-8-overlay is the CSS class of the white color container. You can obviously switch colors.
- dm-preloader-8-image is the CSS class of the image widget where we used our logo.
- dm-preloader-8-text is the CSS class of the heading widget, make the HTML tag to p.
- dm-preloader-counter-8 is the CSS class of the counter heading widget.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-8-overlay {
mix-blend-mode: difference;
transition: none !important;
}
.dm-preloader-8 {
transition: none !important;
}
</style>
<script>
let isGsapFinished8 = false;
let isProgressFinished8 = false;
const dmPreloader8 = document.querySelector('.dm-preloader-8');
const dmPreloader8Overlay = document.querySelector('.dm-preloader-8-overlay');
const dmPreloader8TL = gsap.timeline({
onComplete: () => {
isGsapFinished8 = true;
onPreloader8Completion();
}
});
dmPreloader8TL.from('.dm-preloader-8-text', {
y:-100,
opacity:0,
duration:1,
ease:'power2.out'
},0);
dmPreloader8TL.from('.dm-preloader-8-image', {
y:-100,
opacity:0,
duration:1,
ease: 'power2.out'
},0.1);
Pace.on("progress", function (percent) {
const preloaderText8 = document.querySelector(".dm-preloader-counter-8 .elementor-heading-title");
preloaderText8.textContent = `${Math.floor(percent)}%`;
dmPreloader8Overlay.style.width = `${percent}%`;
});
Pace.on('done', function() {
isProgressFinished8 = true;
onPreloader8Completion();
});
function onPreloader8Completion() {
if(isProgressFinished8 && isGsapFinished8) {
gsap.to(dmPreloader8, {
delay:1,
y:'-100%',
duration:1,
ease:'power3.out',
onComplete: () => {
dmPreloader8.style.display = 'none';
}
})
}
}
</script>
#9 – Horizontal Image Reveals Preloader
- dm-preloader-9 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-9-color is the CSS class of the 2nd color container, make sure to give it position absolute, place it at top or bottom and set height to 0vh as we increase height via our animation later.
- dm-preloader-counter-9 is the CSS class of the heading widget. (Set HTML tag as p)
- dm-preloader-9-image is the CSS class of the images. Make sure to give it position absolute and play with offset(%), rotate to create a nice layout.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-9 {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.dm-preloader-9, .dm-preloader-9-color {
transition: none !important;
}
.dm-preloader-9-image {
transition: none !important;
}
.dm-preloader-9-image .elementor-widget-container {
overflow: hidden;
}
</style>
<script>
//Get all images widget
const dmPreloader9Images = document.querySelectorAll('.dm-preloader-9-image');
//Only get the img inside divs
const dmPreloader9ImgElements = document.querySelectorAll('.dm-preloader-9-image img');
const dmPreloader9 = document.querySelector('.dm-preloader-9');
let isGsapFinished9 = false;
let isProgressFinished9 = false;
//Images Widget animations
const dmPreloader9TL = gsap.timeline({
onComplete: () => {
isGsapFinished9 = true;
onPreloader9Completion();
}
});
dmPreloader9Images.forEach((imgElement) => {
dmPreloader9TL.from(imgElement, {
opacity: 0,
duration: 0.8,
ease:'none'
});
});
//img inside divs animations
const dmPreloader9ImgTL = gsap.timeline();
dmPreloader9ImgElements.forEach((img) => {
dmPreloader9ImgTL.from(img, {
scale:1.05,
duration: 0.8,
ease:'none'
});
});
//Pace js code
const dmPreloader9color = document.querySelector('.dm-preloader-9-color');
Pace.on("progress", function (percent) {
const preloaderText9 = document.querySelector(".dm-preloader-counter-9 .elementor-heading-title");
preloaderText9.textContent = `${Math.floor(percent)}%`;
dmPreloader9color.style.height = `${percent}vh`;
});
Pace.on('done', function() {
isProgressFinished9 = true;
onPreloader9Completion();
});
function onPreloader9Completion() {
if(isProgressFinished9 && isGsapFinished9) {
gsap.to(dmPreloader9, {
delay:1,
clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',
duration:1.5,
ease:'power3.out',
onComplete : () => {
dmPreloader9.style.display = 'none';
}
});
}
}
</script>
#10 – Stacking Image Preloader
- dm-preloader-10 is the CSS class of the preloader container. Make its height to 100dvh for better responsiveness. (In height, instead of px, switch it to pen icon and type 100dvh manually).
- dm-preloader-10-color is the CSS class of the 2nd color container, make sure to give it position absolute, place it at top or bottom and set height to 0vh as we increase height via our animation later.
- dm-preloader-counter-10 is the CSS class of the heading widget. (Set HTML tag as p)
- dm-preloader-10-image is the CSS class of the images. Make sure to give it position absolute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js" integrity="sha512-4a56NRIrhn/ePBdSSNfwsmL+eZt/uCXEb7s+3B8tg/tDiywDMKb5u2QCdhsYQtEkUMPGE5GUVbZYqgKeRzJ7yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-preloader-10 {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.dm-preloader-10, .dm-preloader-10-color {
transition: none !important;
}
.dm-preloader-10-image {
transition: none !important;
}
.dm-preloader-10-image .elementor-widget-container {
overflow: hidden;
}
</style>
<script>
//Get all images widget
const dmPreloader10Images = document.querySelectorAll('.dm-preloader-10-image');
const dmPreloader10 = document.querySelector('.dm-preloader-10');
let isGsapFinished10 = false;
let isProgressFinished10 = false;
//Images Widget animations
const dmPreloader10TL = gsap.timeline({
onComplete: () => {
isGsapFinished10 = true;
onPreloader10Completion();
}
});
dmPreloader10Images.forEach((imgElement) => {
imgElement.style.opacity = 0;
dmPreloader10TL.from(imgElement, {
scale:1.1,
duration: 0.8,
ease:'power1.inOut',
onStart: () => {
imgElement.style.opacity = 1;
}
});
});
//Pace js code
const dmPreloader10color = document.querySelector('.dm-preloader-10-color');
Pace.on("progress", function (percent) {
const preloaderText10 = document.querySelector(".dm-preloader-counter-10 .elementor-heading-title");
preloaderText10.textContent = `${Math.floor(percent)}%`;
dmPreloader10color.style.height = `${percent}vh`;
});
Pace.on('done', function() {
isProgressFinished10 = true;
onPreloader10Completion();
});
function onPreloader10Completion() {
if(isProgressFinished10 && isGsapFinished10) {
gsap.to(dmPreloader10, {
delay:1,
clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',
duration:1.5,
ease:'power3.out',
onComplete : () => {
dmPreloader10.style.display = 'none';
}
});
}
}
</script>
