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.
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>
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.
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)
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.
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?