OceanWP Website Preloader

As of OceanWP version 3.4.0 and above and Ocean Extra version 2.1.0 and above, you are able to use the OceanWP website Preloader feature.

What is a website Preloader

A website preloader is an animation that is displayed to your website visitors while your website content is loading.

The video below displays one of the inbuilt CSS icon animation styles you can use on your website.

When should you use a website Preloader

If your website is running like a rocket, then you don't have the need for a website preloader because it will only be displayed for a glimpse and your site visitors won't be even able to catch it.

The website Preloader feature is useful in the following situations:

• websites with lots of content (images, videos, etc);
• websites running on slower hosting.

What are the benefits of running a website Preloader

Using a website Preloader has lots of benefits, but speeding up your website is not one of them. Preloaders do not have any impact on your website speed.

However, these are the key benefits of using a Prealoder on your WordPress website:

• reduce bounce rate, because the preloader will display until your website content is loaded in full. This means that your website visitors will know the website functions and the content is loading.
• branding - thanks to options to use custom templates, images or even a logo, you can make a powerful impact on your site visitors from the start.

How to use a website Preloader with OceanWP

To make use of the OceanWP Preloader feature, navigate to Customize > General Options > Preloader and enable this feature.

The OceanWP Preloader feature is disabled by default.

OceanWP Preloader Types

OceanWP supports two types of the Preloader feature:

• default, which comes with a set of inbuilt options you can choose from, and
• custom, which enables you to use your very own custom template built in OceanWP > My Library.

OceanWP Default Preloader

The Default OceanWP Preloader type supports 4 options for the icon type:

• CSS, which makes use of 10 inbuilt animation styles you can choose from.
• Image, which allows you to upload any image to use with the preloader screen.
• Logo, which uses your website logo for the preloader screen.
• SVG, which allows you to upload any SVG file type to use with the preloader screen. If you're unable to upload SVG files to your WordPress Media Library, navigate to your WP Dashboard, OceanWP Panel > Integration, and enable the support for SVG files.

Each of the 4 Preloader icon types comes with their own set of settings respectively, and the settings are quite simple to customize.

In addition to the icon types, you can also customize:

• content, add your own text to be displayed along with the icon, image or logo.
• overlay color, the background color for the preloader animation which covers the screen.
• icon color, the color of the icon for the CSS icon type.

OceanWP Custom Preloader

Navigate to your WP dashboard, OceanWP > My Library.

Create your own custom template making use of any page builder you like and publish the template.

Navigate back to Customize > General Options > Preloader, and set the Preloader type to Custom, then select your template and publish changes.

OceanWP Preloader Typography

Your website Preloader feature comes with its own typography options.

Since the appearance of the Preloader typography settings have a conditional display hook in order not to load options for features which are not in use, first you need to:

1. Enable the Preloader via Customize > General Options > Preloader.
2. Publish changes.
3. Refresh the Customizer (reload page).
4. Navigate to Customize > Typopgraphy > Preloader Content.
5. Adjust settings per need.

Need to learn more about OceanWP typography usage? Check out our full document on how to use OceanWP Customizer Typography settings.

That's it!

Enjoy building with OceanWP!