In this article, you will learn how to add a preloader to your site. A preloader is an animation on a website that runs while your internet browser is loading the website in the background. The first thing you need to do is go to the section in the control panel Plugins, add a new one called Preloader Plus and then activate it. After you have done that, you need to under the section Appearance, select an option Customize within which we will additionally set Preloader plugin.
When you turn on Customize, click on Preloader Plus and you can customize the plugin under several different sections such as Settings, Typography, Icon/Image, Progress bar and Animations.
Under the section Settings you can set whether the preloader will be shown only on the home page all the time, only once on the first page of the site you set, or on all pages all the time. Here you also choose what will be displayed while the site is loading, whether an icon, any arbitrary image, site name, logo, loading percentage, and the like will be displayed. Try everything and play. You can also change the background color of the site while the preloader is displayed and the color of the preloader text. In this example, we will set the logo and percentage to be displayed.
To adjust the logo, you need to exit the section Settings and open Icon/Image. Within this section add an icon or image, we have added a logo image under the option Custom Image.
Under the section Progress bar you can also change its color and size. Under the section Typography change the font size, if you have set some text to be loaded while the site is loading and under the section Animations you change when the preloader animation will start. Once we have everything set up, our preloader looks like this.
