How to add a Preloader or Loading Screen to Wix site

add a preloader or loading screen to Wix

Want to add a preloader to your Wix site?

In less than ten steps you can add a preloader or loading screen to the Wix site. For this, You don’t need any coding knowledge. A preloader gives a professional look to your website and assures the users that content is loading. Besides this, it is a good way to hide your website’s slow speed.

A preloader indicates the user that the page is loading in the background. This can be done in various ways such as by using animation or simply showing the loading text. A preloader or loading screen is really useful when a webpage contains a lot of content which takes some time to load. In this tutorial, we will be going to create and add a simple preloader using a text and gif image. After adding the preloader your website will look like this.

Features

Here are some features of using this preloader in Wix site –

  • Easy to add.
  • No coding requires, just copy and paste the code.
  • Looks great.
  • Gives professional touch.

Adding the preloader to Wix

In this example, we will use a box as a background. You can also use strip or lightbox but both of them some drawbacks. The strip does not support pin to screen whereas the lightbox does not allow fadeout animation. Thus, the box is the right choice for background if you want both of these effects. To implement a preloader make sure that you have done with the editing of your website or webpage as it will cover all content and you will not able to see the stuff below it. To add a preloader or loading screen to your Wix site you need to follow these steps.

  1. Open your Wix site in Editor mode.
  2. Click on the Add button (+ sign) on the left side and add a box.
  3. Resize the box to full screen. Make sure to cover all the elements that come into one screen.
  4. Add a text and image element to the box to make it look better. You can use a gif file to give it a cool loading effect. It might be look something like below.

    How to add a Preloader or Loading Screen to Wix site
  5. Right-click on the box and select pin it to screen. Set both the vertical and horizontal offsets to 0.
  6. Once again right-click on the box and select show on all pages if you want to show this preloader on all pages.

    How to add a Preloader or Loading Screen to Wix site
  7. After that go to Dev Mode menu and turn the Dev Mode ON.
  8. Click on the box you have added in step 2. You will see a properties panel. Double click on the ID element and rename it to – preloader.

    How to add a Preloader or Loading Screen to Wix site
  9. Go to the code section at the bottom of the screen and select the site segment on the left side and add the following code.
    $w.onReady(function () { 
    WaitForLoad();
    });

    export function button_onClick () {
    $w('#preloader').show();
    };

    function WaitForLoad () { setTimeout(()=>{
    $w('#preloader').hide('FadeOut'); },2000);
    }
  10.  That’s it. Click on the preview to test it.

Some Drawbacks

If you follow all the steps, you will see a simple yet fully working preloader but this method is not the best way and has some drawbacks.

  • The preloader will take some time to load in the beginning which means a small delay before it starts showing.
  • It doesn’t work on the mobile view due to the usage of the pin to screen option.
  • This preloader can only be implemented at the end as it will cover all the stuff.

This works perfectly on the web version of your site but the mobile version does not work properly as when we apply pin to screen on any element that element gets aligned at header or footer in mobile view. Therefore, always hide the element on your mobile view and use a separate version for the mobile view.  If you are a premium member then you can also add a preloader using an analytics tool.

Bottom line

This is the simplest way to add a preloader or loading screen to your Wix site. You can customize the loading screen as you want. It is all about your creativity how you want it to look like. Don’t forget to subscribe to our feed us for future updates on Wix and other content.

Leave a Reply

Your email address will not be published. Required fields are marked *