[Tutorial] How to Implement a Page loader

HI @NIr its really hard to answer your question because I’m not sure what you’re working with (not enough details) but @bartekkustra a few comments up posted a really nice set of instructions ending with a nice portrait of a potato =)

I’d also suggest watching the tutorials on symbols and interactions and everything should become very clear.

Good luck!

Hi @pingram3541 and @bartekkustra…?

Im referring to the Loadie.js
http://9elements.github.io/loadie.js/#

The wait for all elements to load it good (sometimes a bit glitchy).
I wanted to incorporate a bar that can show the progress like the link attached above.
Im doing something wrong when trying to add the J Quary to my page, or loader div.

You might be better finding another loader library because loadie.js responds to an ajax-driven page. That said, if you’re an experienced scripter and can write a script to parse the elements of your page into a variable that gets updated on the percent of the page load, then you should be able to do this.

First you’d have to host the loadie.js somewhere online (maybe a CDN) so you can include that script tag with the full path to the file in the custom code of your webflow project. Then you’d need to add a script AFTER it to initialize it.

ie in custom code footer section:

<script src="https://path.to.your.loadie.script.js"></script>
<script>
(function($){
$('body').loadie(); //or your custom selector $('.my-loader').loadie();

//then you'll need to provide loadie with the progress increments, not sure how you're going to do this though
var percent = customPercentFunction(); i.e 0.74
$('body').loadie(percent);
})(jQuery);
</script>
1 Like

Thanks @brryant for update ;)

Instead of a progress bar it would be better I believe to have a GIF animation that goes from 0 to 100%. Or simply a loading icon (animated) instead of a progress bar.

To create a progress bar it would require a little more coding experience. On the other hand @pingram3541’s solution looks fairly easy. The only problem with me is that I don’t like someone’s library - it doesn’t give me the freedom I wish to have using scripts.

Fixed Navbar Getting in the Way!

I have a fixed navbar that is set to slide in after a period of 300ms upon page loading. I don’t want the slide-in to activate until the loader has finished. How would I go about doing that? Thx!

(The white triangular background is the loader div which is just below Body in the hierarchy)

https://preview.webflow.com/preview/ineedtoupgrade?preview=d3f739535248784f495a2b8926e107ec

Hi @ilikewebdesign, one thing you can try, is to set the “Wait for assets to Load” checkbox. Then keep the first wait time in the interaction (currently you have it set to 2500ms) and set that to the number of milliseconds equal to the number of milliseconds that the interaction on the loading div runs.

You can also set the loader div to start after the page assets have loaded, so both interactions load with precise timing :smile:

​I hope this helps. :slight_smile:

Thanks! That seems to work perfectly!

2 Likes

Thanks a lot! I have done exact the same, but it doesnt waits for the background video to load. How can I make it wait for the video to load?

thx for sharing, this tutorial is quite useful and I am looking for guide to implement a page loader and this thread did a great help.

My page always loads at the end of the page after the fadeout. No Idea why.

EDIT: I have currently resolved it using $('html, body').animate({ scrollTop: 0 }, 0);

I’m pretty sure that you have autofocus option set for one of the fields in the contact at the bottom of the page. Can you please share the preview link?

could you give a copy of the long code that you pasted into the custom code area - for myself a beginner

including the lazy load javascript file you mention that can be pasted in there rather than your own server

7 posts were split to a new topic: Need help to create a Page Loader

I tried this, did not work. Any video on how to do it? thanks

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.