Preloader Example
using Wix Code*
Illustrations by Idelle Fisher
LOADING
EXAMPLE CODE TO COPY:
$w.onReady(() => {
waitForLoading();
});
export function button6_onClick(event) {
$w('#preloader').show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w('#preloader').hide('FadeOut');
}, 1500);
}
HOW TO CREATE A PRELOADER IN WIX:
This example demonstrates how to create a preloader, which can be used to let users know website content is loading while your graphics load.
The preloader on this page is a box element. The preloader overlays the content elements. The slow load is simulated by using a JavaScript setTimeout function. When the content loads, the preloader is hidden using the FadeOut animation.
1. To do this, Turn On your Developer Tools in your Wix Editor
(found under Code in top menu).
2. Copy and paste the code on this page into your Page's Code area at the bottom of the Wix Editor.
3. Create a Strip with all your preloader graphics desired, then name it "preloader". To do this, make sure your Properties Manager is set to be on under Tools, then click on the Strip, You should now see a Properties window that has a ID – add "preloader" to the ID field by clicking on it.
Looking for a Wix Designer to help take your website or other design materials to the next level?
We offer Wix Website Design, Wix Coding, Graphic Design, Infographic Design, Annual Report Design, and Logo Design. We specialize in custom website design with built-in SEO (search engine optimization) so that your website will look beautiful AND also be found on search engines.