The script is now updated with position fixed so you no longer can scroll outside the page loader when the script is running. 🖥❤️
@louisecoppere281010 ай бұрын
Hi! Position fixed doesn't work on my website, any idea why?
@ashleyhibbard4395 ай бұрын
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!
@ashleyhibbard4395 ай бұрын
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?
@denisgoldman325516 күн бұрын
LIKE bro! Great pitch! Very energetic!👍
@JacobVinjegaard15 күн бұрын
Thanks! I'm glad you like it. 🖥❤️
@user-cq7tj3lc3r Жыл бұрын
You deserve more than this number of subscribers !
@JacobVinjegaard Жыл бұрын
Thanks bro… I’m working on it and hopefully it will come! 🖥❤️
@hwteree6 ай бұрын
Wow! Works fine! Thnks man!!
@JacobVinjegaard6 ай бұрын
You are welcome I’m glad you like it! 🖥❤️
@thewebstylist Жыл бұрын
Awesome! 🎉
@JacobVinjegaard11 ай бұрын
Thanks! 🙏🏻
@zuberaliiАй бұрын
thank yoou
@JacobVinjegaard26 күн бұрын
You are welcome brother! 🖥❤️
@dennisdybdal Жыл бұрын
Excellent content! Easy and clear walk through.
@JacobVinjegaard Жыл бұрын
Thanks Dennis. I’m glad you like it! 🖥❤️
@Vodka2Drink Жыл бұрын
Love all Your Videos ! Please Keep it Going , You'r Doin Well ! You are my Favourite Teacher of Wordpess / Elementor !
@JacobVinjegaard Жыл бұрын
Thank you very much Kosta I'm glad you like it!🙏🏻🖥❤
@Vodka2Drink Жыл бұрын
@@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
@JonasMusicDK Жыл бұрын
Wicked!!!
@JacobVinjegaard Жыл бұрын
Thanks Buddy! 🖥❤
@SuperABOALAA3 ай бұрын
thanks it worked
@JacobVinjegaard3 ай бұрын
I’m glad you like it! 🖥❤️
@generallnine6 ай бұрын
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!
@JacobVinjegaard5 ай бұрын
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! 🖥❤️
@atria59429 ай бұрын
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? ☯︎
@JacobVinjegaard9 ай бұрын
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?
@atria59429 ай бұрын
@@JacobVinjegaard Thanks Jacob! I think I mean the page itself... So the black screen opens (curtain style) to the website
@maryemfarooqi94008 ай бұрын
thanks! btw if anyone wants to change the size of their lottie do: #lottie-loader { width: 800px; height: 800px; }
@JacobVinjegaard8 ай бұрын
You are welcome. I’m glad you like it and that’s exactly how you do it! 🖥❤️
@teodorggg3 ай бұрын
Guys, if your header is showing during the loader animation, add "z-index: 99;" into code.
@JacobVinjegaard3 ай бұрын
Thanks for contributing!!! 🖥❤️
@samiawais1956Ай бұрын
Your comment helps me a lot.
@SajidHameed-kp5tb10 ай бұрын
Super Bro. Subscribed
@JacobVinjegaard10 ай бұрын
Thanks bro... It's highly appreciated! 🖥❤️
@ashleyhibbard4395 ай бұрын
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?
@JacobVinjegaard5 ай бұрын
Thanks I’m glad you like it. Yes simply just google CSS transitions and put in where it says transition in the code. 🖥❤️
@Max-fy4rc11 ай бұрын
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.
@JacobVinjegaard11 ай бұрын
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. 🖥❤️
@ProvensalLegallois4 ай бұрын
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 ?
@JacobVinjegaard3 ай бұрын
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! 🖥❤️
@jonathanalonhalimi51876 ай бұрын
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?
@JacobVinjegaard6 ай бұрын
Hey I’m glad you like it. No it’s playing on top of the site along with the load of the other content. 🖥❤️
@TravelingWithNewBie6 ай бұрын
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 ?
@JacobVinjegaard6 ай бұрын
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! 🖥❤️
@humbertg.96617 ай бұрын
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!
@JacobVinjegaard7 ай бұрын
Yes that can be fixed. Please add the link to your site then it’s easier for me to take a look at it. 🖥❤️
@fdsgfdghghdhffhdfh-eo7pm8 ай бұрын
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
@JacobVinjegaard8 ай бұрын
Thanks I’m glad you like the video! You can also set the Z-index on the page loader higher. 🖥❤️
@asafsagi3247 Жыл бұрын
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
@asafsagi3247 Жыл бұрын
Also I can't click or hover anything on the screen for a few seconds after the page loader closes.
@JacobVinjegaard11 ай бұрын
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. 🖥❤️
@JacobVinjegaard11 ай бұрын
just add this little code snippet under the style section in the script... That should fix the problem. 😉 pointer-events: none;
@kscreative109 ай бұрын
Nice done! like the clean code and funcionality. Is this also possible with a mp.4 clip (responsive)?
@JacobVinjegaard9 ай бұрын
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! 🖥❤️
@kscreative109 ай бұрын
Thanks! ;-)@@JacobVinjegaard
@user-dp2hn4rp7i Жыл бұрын
You're amazing man! Can you make a video about custom cursors?
@JacobVinjegaard Жыл бұрын
Thank you so much brother. Yes that is one of the tutorials I will make in the near future! 🖥❤️
@user-dp2hn4rp7i Жыл бұрын
@@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?
@noelfromgen2546 Жыл бұрын
@@user-dp2hn4rp7i Yeah I am having the same issue. Do you have a tip to fix this? @JacobVinjegaard
@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. 🖥❤️
@JacobVinjegaard Жыл бұрын
@@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. 🖥❤️
@gavindev10076 ай бұрын
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?
@JacobVinjegaard6 ай бұрын
You should just make the loader duration longer and then it should work just fine. 🖥❤️
@borisnieminen6772 ай бұрын
Hi, can you have a fade in of the page transition and element (lottie, icon, image etc). Currently it appears suddenly.
@JacobVinjegaard2 ай бұрын
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. 🖥❤️
@borisnieminen6772 ай бұрын
@@JacobVinjegaard Cheers mate!
@mustafacetin51005 ай бұрын
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
@JacobVinjegaard5 ай бұрын
Try to set the code order in Elementor to number 1. 🖥❤️
@DoktoorDre8 ай бұрын
Great video! I have one extra question: Do you know how to make it so that the preloader only shows once per session?
@JacobVinjegaard8 ай бұрын
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. 🖥❤️
@DoktoorDre8 ай бұрын
@@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.
@S04B3L7 ай бұрын
i still see the navigation bar
@S04B3L7 ай бұрын
fixed... added this to the css: z-index: 10;
@JacobVinjegaard7 ай бұрын
Exactly. Good job! 🖥❤️
@iegorsekirin84436 ай бұрын
Great work. Thank you ! And if you want to scale it, is there an option ?
@JacobVinjegaard6 ай бұрын
Thanks I’m glad you like it! 🖥❤️ What do you mean by scale it?
@iegorsekirin84436 ай бұрын
@@JacobVinjegaard Thank you for your answer. I mean scale the size of lottie animation in the screen, is it possible ? 🤔
@tubaraovegano91209 ай бұрын
Only works in preview mode, I tried to display in mobile or other browser but its not showing up
@JacobVinjegaard9 ай бұрын
Hi. Just cleare your server and browser cache and then it will work just fine! Computer Love 🖥❤️
@tubaraovegano91209 ай бұрын
@@JacobVinjegaard It was WpRocket, just put the code .json into exclude section. Thanks.
@noelfromgen2546 Жыл бұрын
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?
@JacobVinjegaard Жыл бұрын
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. 🖥❤️
@JacobVinjegaard Жыл бұрын
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. 🖥❤️
@noelfromgen2546 Жыл бұрын
@@JacobVinjegaard Thank you very much for the info Jacob. I am really appreciate it. Keep up the good work 💪
@gayjosi1 Жыл бұрын
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.
@JacobVinjegaard Жыл бұрын
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! 🖥❤️
@andreaegli7 ай бұрын
change the location of the code to body start. JS needs to laod before the page in this case
@ItsMiaMuffy34 ай бұрын
@@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
@isaacsprague40526 ай бұрын
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?
@isaacsprague40526 ай бұрын
I was able to figure out what was going on using AI. I can get a link for people if they are interested.
@JacobVinjegaard6 ай бұрын
Perfect... What did you du to fix it?
@baileybrock178726 күн бұрын
Could you share your link?
@majorleagueshorts Жыл бұрын
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?
@JacobVinjegaard Жыл бұрын
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. 🖥❤️
@majorleagueshorts Жыл бұрын
@@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.
@badrbichoutar3 ай бұрын
does it work for videos uploaded in wordpress media ? cause for me i doesnt
@JacobVinjegaard2 ай бұрын
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! 🖥❤️
@borisnieminen67711 ай бұрын
Great tutorial. I have an animation built with CSS/HTML/JS. Would your code work with this or do suggest another method? Thx
@JacobVinjegaard11 ай бұрын
Thanks I’m glad you like it! It should work just fine. 👍🏻🖥❤️
@borisnieminen67711 ай бұрын
@@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?
@lucierathonie7088 Жыл бұрын
How to do the same but with a GIF ?
@JacobVinjegaard Жыл бұрын
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); });
@lucierathonie7088 Жыл бұрын
@Jacob Vinjegaard thank you !! I will try this 🙂
@user-cf5dw6kx6j8 ай бұрын
hi Jacob!! great video! but i have free elementor, is there a way for doing it free?
@JacobVinjegaard8 ай бұрын
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! 😉🖥❤️
@user-cf5dw6kx6j8 ай бұрын
alright! i will thanks man!@@JacobVinjegaard
@AlexAlex-hw4kr Жыл бұрын
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.👍
@JacobVinjegaard Жыл бұрын
Hey Alex. Just send it on my mail. jacob@vinjegaard.com 🖥❤️
@AlexAlex-hw4kr Жыл бұрын
@JacobVinjegaard All right, great! Thank you very much. I just sent an email 👍❤️
@maxs.14911 ай бұрын
Is it possible to do that with a gift? I don’t have Lottie
@JacobVinjegaard11 ай бұрын
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); });
@maxs.14911 ай бұрын
@@JacobVinjegaard thank you sooooo much!!
@AbdulAziz-cj4hg6 ай бұрын
how do i resize on mobile modee?
@AbdulAziz-cj4hg6 ай бұрын
never mind i asked chat gpt aand it is now solved!🤣🤣
@JacobVinjegaard5 ай бұрын
ChatGPT rocks for this kind of problems! 🖥❤️
@NaveedAhd Жыл бұрын
it dint work please help
@NaveedAhd Жыл бұрын
Help
@JacobVinjegaard Жыл бұрын
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. 🖥❤
@NaveedAhd Жыл бұрын
@@JacobVinjegaard yes i did everything just like you. But it isn’t working
@JacobVinjegaard Жыл бұрын
@@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!? 🙃
@frankschest85843 ай бұрын
I have a problem. My page loads before the animation is completed. os it sows on top of everything. can you help please?
@JacobVinjegaard3 ай бұрын
Hi Frank... Pls send me the link to your site so i can see the exact problem you have? 🖥❤️
@frankschest85843 ай бұрын
@@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.
@frankschest85843 ай бұрын
actually none of the links is working on your page. :(
@Miguelos.696 ай бұрын
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!
@JacobVinjegaard6 ай бұрын
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. 🖥❤️
@Miguelos.696 ай бұрын
@@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!
@JacobVinjegaard6 ай бұрын
@Miguelos.69 hi again. Please link to your site and I will give it a look.
@gavindev10076 ай бұрын
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?
@JacobVinjegaard6 ай бұрын
You should just make the loader duration longer and then it should work just fine. 🖥❤️