Page Preloader

Have a lot of page content to load? Page pre-loaders are a great way to let site visitors know that content is loading, and that there’s something to wait for. More than a dozen pre-loader styles and extensive customization options provide the tools you need to improve your bounce rates.

Demo: https://demo.wocode.com/page-preloaders

Tutorial Video

Setup

WIDGET PLACEMENT

• You may place the widget anywhere on the page. Placement is not important, as the widget placeholder will not be seen when published.
• If you wish to apply the pre-loader to every page on your site, place it in the header or footer.

WIDGET OPTIONS (CONTENT)

• Preview Pre-Loader in Editor: This is a handy tool for previewing the pre-loader. Enabling this setting allows you to see the pre-loader in action. You will want to disable it again when you’ve finished customizing it.
• Pre-Loader Style: This setting allows you to select one of 15 different pre-loader styles. Enable Preview Pre-Loader in Editor to see the pre-loader styles in action.
• Fade Out Speed: Sets the time it takes for the pre-loader and background overlay to fade away. The time set here begins once the page loads (the time entered is added onto the time it takes to access the page). Long fade out speed settings will result in a slight delay of accessing the page.

WIDGET OPTIONS (DESIGN)

• Background Overlay: In addition to the page pre-loader, a background overlay is also used. You may set the overlay to any color you like. Note that this may be set to transparent as well.
• Pre-Loader Styling > Width: This allows you to set the size of the pre-loader.
• Pre-Loader Styling > Pre-Loader Color: Sets the color of the Pre-Loader

Note: If you have any trouble with the pre-loader loading and not going away, try turning off Quick Navigation. Access this setting by going opening your navigation settings, then Design > Pages > More design options > Quick Navigation.