If you have a website filled with hard-to-load content, such as multiple pages, videos or images, you might want to consider adding a preloader to improve user experience. A preloader acts as a loading screen that appears before your website's content fully loads, ensuring that it appears seamless to visitors.
The preloader that we will create in this article has nothing to do with the download speed of the project. Normally, the preloader turns off at the moment when all the assets are loaded, but in our case, it's more like a part of the show—like the introduction to a new episode or short films before a movie.
Check out our guide, “How to make your project load faster”, to find great tips on how to improve loading times.
1. Add a lightweight widget
Open the Editor and add a widget that will serve as a basis for your preloader. It's best to use a lightweight widget, such as Shape. This will guarantee that it loads quickly and appears before your main content.
2. Fix the widget’s position
Make sure to fix your chosen widget to the center of the screen and make it display above all other content.
3. Add animation
Add an on-load animation with a suitable delay based on the content loading time.
To set the appropriate delay for the preloader animation, you need to track how long it takes to load the main site and set this value in seconds. Usually, it takes 3-5 seconds, but the actual time may vary depending on a variety of factors: the speed of the Internet, the device being used, etc. To get a more accurate estimate, you can use Google Pagespeed.
Once you’ve specified a delay, set the animation duration and opacity from 100 to 0. You also can customize the animation: add acceleration or other effects to make it more engaging.
4. Scale the basis widget
To ensure the preloader covers the whole screen, you need to adjust the widget's size accordingly. You can zoom out using cmd - on Mac and ctrl - on Windows. You can also enable Guides by pressing H, if you want to see the borders of the layout.
5. Finalize your preloader
Finally, it’s time to add a personal touch to your preloader. You can add an animated progress bar using a GIF, a percentage loader via code, or rotating points of interest, to name just a few possibilities.
That's it! With these simple steps, you can create a preloader and provide a seamless experience for your website visitors, even if your project is filled with long-to-load content.