Preloader on website

Hello everyone,

Does anyone know how to create a preloader for a website, I leave you a link so you can get an idea, this can help improve the UX. From already thank you very much!



I created a Bricks Template with my loading animation, set a class to a dom element when the timeline finishes.

Insert the template using a shortcode and Bricks Filter, in my scenario I needed it to come after <main>. Optionally you could set a cookie so it only displays once. You may want to put it higher or lower in the DOM. Experiment.

Then create an event in BF panel and lean on the MutationObserver to check if that class you added in the first step is set and hide the preloader anyway you want. i.e slideUp or fadeOut.

I dont like Bricks popups for preloaders as they are by default hidden and you need the preloader to display immediately in the dom above all other content.

Hope that helps provide a few clues. Please respond if you find a better solution.