Create a Custom Page Loader with Lottie Animation in Elementor!
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- In this weeks video we are setting up a custom animated page loader with Lottie animation in Elementor!
Get The Code:
www.vinjegaard.com/tutorial/c...
---------------------------
Get Elementor Pro:
trk.elementor.com/pixel-perfect
Get Epidemic Sound:
www.epidemicsound.com/campaig...
FOLLOW ME:
🖥 Website: www.vinjegaard.com
📸 Instagram: / jacobvinjegaard
00:00 Intro
00:38 What Are we Creating?
00:58 Setting Up The Page Loader
04:25 Outro
The script is now updated with position fixed so you no longer can scroll outside the page loader when the script is running. 🖥❤️
Hi! Position fixed doesn't work on my website, any idea why?
I'm having the same problem. When the preloader is playing you can scroll and then the user ends up mid page when the animation ends.@@louisecoppere2810 Any thoughts @jacobvinjegaard? Thanks so much for the tutorial!
Thanks for this Jacob! I'm having the same issue as lousie mentioned below. when the loader is playing, the end user can scroll and then when the animation finishes and fades away then the end user is half way down the screen. is there any way to stop this?
Excellent content! Easy and clear walk through.
Thanks Dennis. I’m glad you like it! 🖥❤️
Wow! Works fine! Thnks man!!
You are welcome I’m glad you like it! 🖥❤️
Awesome! 🎉
Thanks! 🙏🏻
Guys, if your header is showing during the loader animation, add "z-index: 99;" into code.
Thanks for contributing!!! 🖥❤️
Your comment helps me a lot.
Love all Your Videos ! Please Keep it Going , You'r Doin Well ! You are my Favourite Teacher of Wordpess / Elementor !
Thank you very much Kosta I'm glad you like it!🙏🏻🖥❤
@@JacobVinjegaard P.S Thanks to you I'm using the Pro version of Elementor and the project got waxed, I hope the Pro version doesn't get canceled for years to come
You deserve more than this number of subscribers !
Thanks bro… I’m working on it and hopefully it will come! 🖥❤️
thanks it worked
I’m glad you like it! 🖥❤️
Wicked!!!
Thanks Buddy! 🖥❤
Super Bro. Subscribed
Thanks bro... It's highly appreciated! 🖥❤️
thanks!
btw if anyone wants to change the size of their lottie do:
#lottie-loader {
width: 800px;
height: 800px;
}
You are welcome. I’m glad you like it and that’s exactly how you do it! 🖥❤️
this is an Amazing script and Video! i just encountered a problem tho, if a img or anything is position:absolute, or if a element is in z-index 1 or something, it sticks thru the background of the page loader screen. It would be nice if there is a relution for this! i love anything about this, idk how u only have 1k subs u deserve way more!
Thanks... I'm glad you like it! Try to raise the z-index on the page loader in the custom code. That should do the trick! 🖥❤️
Awesome! Thanks for this. I had to change the display style to "cover" to get a my animated logo better quality but works a treat!
Is there a way of adding an entrance animation after the lottie plays?
☯︎
Hi Atria. I’m glad you like the video! Great to hear you managed to change the code yourself and get the results you wanted! 🖥❤️
Yes there is many options to change and customize the code to get another result. Is it the page loader or the page itself you want to add entrance animations to?
@@JacobVinjegaard Thanks Jacob! I think I mean the page itself... So the black screen opens (curtain style) to the website
Hello, this is really great tutorial, very helping me to create the preloader with lottie.
i have one question, if I wanna put the 3D spline assets to change the lottie, which section that I must change with the embedded code from spline ?
Hi I’m glad you like it. I’m not really sure how to do it with a spline screen but it could be a good upcoming tutorial! 🖥❤️
Thanks so much for this! At the end, the animation goes away by fading out in opacity. Are there other transitions available? Like slide out or down? If so, where can I find a list of the options?
Thanks I’m glad you like it. Yes simply just google CSS transitions and put in where it says transition in the code. 🖥❤️
Hi Jacob, thanks for the script. If for instance we set the page loader only for our home page, can we prevent it to play every single time, by setting some sort of delay buffer? Let's say somewhere around 30 and 45 seconds?
Basically to avoid frustration for someone who would be in a rush.
Hi Max. You can prevent it from showing up the second time a user visits your website by logging the IP address in the cookies but that’s a little more complicated to describe here in the comments section… but you should be able to google it. 🖥❤️
cool stuff as usual. One wuestion I created my own lottie that is supposed to occupy 100 vh, but I can only see a small rectangle. can that be fixed, how? Cheers!
Yes that can be fixed. Please add the link to your site then it’s easier for me to take a look at it. 🖥❤️
Nice done! like the clean code and funcionality. Is this also possible with a mp.4 clip (responsive)?
Hey Karim. Thanks for the nice message I’m glad you like the video. I have never tried with a mp.4 video clip. But try to put the code into chat GPT and ask it to replace the Lottie with a video file. I’m sure that will work out for you! 🖥❤️
Thanks! ;-)@@JacobVinjegaard
Great work. Thank you ! And if you want to scale it, is there an option ?
Thanks I’m glad you like it! 🖥❤️ What do you mean by scale it?
@@JacobVinjegaard Thank you for your answer. I mean scale the size of lottie animation in the screen, is it possible ? 🤔
Thank you for this tutorial! but I noticed that it doesn't really play when the page is actually loading, just after it finished loading there is this animation for the defined amount of time. Is there any way to fix this?
Hey I’m glad you like it. No it’s playing on top of the site along with the load of the other content. 🖥❤️
thanks I've had one wierd issue where my heading for some reason still displays on the preload screen, for now I fixed it by making its Z-index -2 but is there any other way to fix
Thanks I’m glad you like the video! You can also set the Z-index on the page loader higher. 🖥❤️
You're amazing man! Can you make a video about custom cursors?
Thank you so much brother. Yes that is one of the tutorials I will make in the near future! 🖥❤️
@@JacobVinjegaard Great! I'm experiencing an issue with the transition page. I'm able to scroll the page before the animation finishes. How can I fix this?
@@user-dp2hn4rp7i Yeah I am having the same issue. Do you have a tip to fix this? @JacobVinjegaard
@@user-dp2hn4rp7i hey I just saw the problem myself yesterday and I will update the code later today day and update it on my site. 🖥❤️
@@user-dp2hn4rp7i I have just uploaded the code so you no longer can scroll outside the the script when it’s running. it’s available on my site now. 🖥❤️
Hello Jacob, thanks for this wonderful tutorial.
the page loads and after a few seconds the preloader appears, how do I make the preloader appear before the page loads.
You are welcome I’m glad you like it!
With this page loader everything loads add the same time, so if you want to to reveal animations after the page loader you need to set delay on the elements.
I hope this helps! 🖥❤️
change the location of the code to body start. JS needs to laod before the page in this case
@@andreaegli Changing the location to body start didn't work for me, it actually made it worse
The way I fixed the problem of my homepage appearing 1s before the loader was to check the checkbox called "Always load jQuery", its next to the location selector
Great video! I have one extra question: Do you know how to make it so that the preloader only shows once per session?
Thanks I’m glad you like it… Yes you need to log it in the site cookies with JavaScript but that’s a bit more complicated to setup. 🖥❤️
@@JacobVinjegaard I didn't find a way to do it with cookies (I'm a bit of a Javascript beginner) but I did find a way to only display it once with each session. So every time I open a now tab/window and go to my website, I see the preloader, but if I refresh or go back to my homepage from another page it is hidden.
Hi, thanks for your video. It seems quite simple however if i follow your steps, it does not work. Here the error message from the JS console : "Uncaught ReferenceError: lottie is not defined". Did i miss something ?
If you follow the steps everything should be just right. But the new Elemonter is not working properly with custom code. Hopefully the next update will fix it! 🖥❤️
I tried yours and it's pretty great, but I see it has a delay => which means that halfway through my website's rendering process, the page loader will display it. Is there a way to fix it?
You should just make the loader duration longer and then it should work just fine. 🖥❤️
Hey thank for this but I have a question. I have like a 0.4 delay. So the preloader starts late. Why?. Can you help me Thank you so much
Try to set the code order in Elementor to number 1. 🖥❤️
Hi, can you have a fade in of the page transition and element (lottie, icon, image etc). Currently it appears suddenly.
Hi... Thanks for watching my videos. Yes you should just put the transition you want into the CSS part of the code. google CSS transitions. 🖥❤️
@@JacobVinjegaard Cheers mate!
does it work for videos uploaded in wordpress media ? cause for me i doesnt
Hi... Thanks for watching my videos. No this code is only for Lottie animations. Buuut put the code into ChatGPT and ask it to replace the Lottie with a video file. Then you should be up and running! 🖥❤️
I got it to work but its playing all together when I load my page instead of as a pre-loader. Any idea on how I can fix this?
Yes that’s exactly what it should do. If you have any animations you want to reveal after the page loader you should use delay. 🖥❤️
@@JacobVinjegaard Sorry, i meant to say its not loading as a pre loader. The animation plays once all the content on my home page loads. Id like to have the lottie file play as a pre-loader.
Hi, great tutorial. But it doesn't work for me as a preloader. For me the "Preloader" loads like an overlay over my hero section. While it's loading I can still scroll the page on my desktop or on my mobile. Do you know how you can prevent scrolling the page while the preloader is showing up?
Hey Noel. I’m glad you like the video!!! 🙏🏻
Yes the loader is made as a overlay so if you have any other animations on your hero section you should set a delay on them to reveal them after the loader has run.
I actually just saw the scrolling problem myself yesterday and you should change the height and width to vh and vw instead of percent. I will change the code later today and upload the new code on my site asap. 🖥❤️
Hey again Noel. I have just updated the code with position fixed and 100vw and 100vh. You can still scroll while the loader is running but it will first reveal the page after the script. It’s available on my page now. 🖥❤️
@@JacobVinjegaard Thank you very much for the info Jacob. I am really appreciate it. Keep up the good work 💪
I'm having a small issue with the code that it's forcing all other lottie animations in the page on loop state. Can't make lottie's play once
Also I can't click or hover anything on the screen for a few seconds after the page loader closes.
Sorry for the late reply... Yes, you just need to change the code where it says 'loop from true to false,' and it will play your Lottie animation only once. 🖥❤️
just add this little code snippet under the style section in the script... That should fix the problem. 😉
pointer-events: none;
Great tutorial. I have an animation built with CSS/HTML/JS. Would your code work with this or do suggest another method? Thx
Thanks I’m glad you like it! It should work just fine. 👍🏻🖥❤️
@@JacobVinjegaard Hi Jacob, what is the difference between putting this code via the Elementor custom code, as seen in the video, and via the HTML widget?
I'm having an issue in which the buttons on my website do not work for about 5 seconds after the page loader is done. Any ideas on a fix?
I was able to figure out what was going on using AI. I can get a link for people if they are interested.
Perfect... What did you du to fix it?
Only works in preview mode, I tried to display in mobile or other browser but its not showing up
Hi. Just cleare your server and browser cache and then it will work just fine! Computer Love 🖥❤️
@@JacobVinjegaard It was WpRocket, just put the code .json into exclude section. Thanks.
How to do the same but with a GIF ?
Hi Lucie,
Use this script instead and paste your gif in where it says "Paste the url to the gif here" int the code 🖥❤
/** Body Overlay **/
body #load {
display: block;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9901;
opacity: 1;
background-color: #263340;
visibility: visible;
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
}
body #load.loader-removed {
opacity: 0;
visibility: hidden;
}
.spinner-loader .load-wrap {
background-image: url("Paste the url to the gif here");
background-position: center center;
background-repeat: no-repeat;
text-align: center;
width: 100%;
height: 100%;
}
// Javascript function to display loader on page load
document.addEventListener("DOMContentLoaded", function(event) {
var $load = document.getElementById("load");
var removeLoading = setTimeout(function() {
$load.className += " loader-removed";
}, 1200);
});
@Jacob Vinjegaard thank you !! I will try this 🙂
hi Jacob!! great video! but i have free elementor, is there a way for doing it free?
Thanks. I’m glad you like it. Check out my video called “must see websites of 2023 for web designers” and I will hook you up! 😉🖥❤️
alright! i will thanks man!@@JacobVinjegaard
i still see the navigation bar
fixed... added this to the css: z-index: 10;
Exactly. Good job! 🖥❤️
Is it possible to do that with a gift? I don’t have Lottie
Hi Maxs.149 absolutely use this code instead. 🖥❤
/** Body Overlay **/
body #load {
display: block;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9901;
opacity: 1;
background-color: #263340;
visibility: visible;
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
}
body #load.loader-removed {
opacity: 0;
visibility: hidden;
}
.spinner-loader .load-wrap {
background-image: url("Paste the url to the gif here");
background-position: center center;
background-repeat: no-repeat;
text-align: center;
width: 100%;
height: 100%;
}
// Javascript function to display loader on page load
document.addEventListener("DOMContentLoaded", function(event) {
var $load = document.getElementById("load");
var removeLoading = setTimeout(function() {
$load.className += " loader-removed";
}, 1200);
});
@@JacobVinjegaard thank you sooooo much!!
how do i resize on mobile modee?
never mind i asked chat gpt aand it is now solved!🤣🤣
ChatGPT rocks for this kind of problems! 🖥❤️
It is not working for me when there are pictures on the home page. I could send you a screenshot of what it looks like.👍
Hey Alex. Just send it on my mail. jacob@vinjegaard.com 🖥❤️
@JacobVinjegaard All right, great! Thank you very much. I just sent an email 👍❤️
I don;t know why it's not working on my end
Neither do I... It should work. Did you complete my tutorial exactly like I did?
it dint work please help
Help
Of course, brother... Are you following my tutorial religiously? And where exactly is it not working? I need more information to help you reach your goal. 🖥❤
@@JacobVinjegaard yes i did everything just like you. But it isn’t working
@@NaveedAhd it's hard to say where it fuckes up... but try to make me a temporary admin login and the i could take a look!? 🙃
I have a problem. My page loads before the animation is completed. os it sows on top of everything. can you help please?
Hi Frank... Pls send me the link to your site so i can see the exact problem you have? 🖥❤️
@@JacobVinjegaard Hi Jacob, I trash the old and trying to copy code from your website. its not loading. 4th time i refreshed the code loaded but no copy button showing. You might wana check it out. So basically I was not able to make a new one. Thanks for the reply thou.
actually none of the links is working on your page. :(
Hi Jacob, I have a problem, that the code only works in preview mode. In preview it is working perfectly fine, but inside a normal browser, or any device it isn't working (I can only see it like a second before the page loads, like if it was behind the page content). I tried to clear my website cache and the browser cache, but it didn't help. Could you help me out? Thanks alot Jacob!
Hi Miguelos. If I understand it correctly you can see the page loader but the other content is on top? If that’s the case you should set a higher z-index on the page loader. 🖥❤️
@@JacobVinjegaard Hey Jacob, thanks alot, I did what you said and it got theoretically better, but I now realized the problem is that the preloader is not visible for the first minute when the DataTable behind it is loading. The issue seems to be related to the order in which scripts are executed. I tried to put on 10 priority and set the location to in the elementor custom code, but it didn't help. Could you please help me out? Thank you alot once again, I truly appreciate it!
@Miguelos.69 hi again. Please link to your site and I will give it a look.
I tried yours and it's pretty great, but I see it has a delay => which means that halfway through my website's rendering process, the page loader will display it. Is there a way to fix it?
You should just make the loader duration longer and then it should work just fine. 🖥❤️