WordPress Cherry 3.x. How to change pages pre-loader

The following tutorial will show you how to edit pages pre-loader in WordPress.

WordPress. How to change pages pre-loader

1. You’ll need to use a developer tool like Firebug to locate code that needs to be changed in CSS. Please reload the site, right click on loader and choose Inspect with Firebug:

   

2. In the Style field you’ll see the css code that displays the loader:

   

3. Please copy all the rules you located with needed selector (in our case #loader) to the bottom of your Cherry options -> General -> Custom css field to edit there:

   

4. You can change the animation features, color, thickness of the lines and so on:

   

5. Please check here for more detailed explanation on how to work with animation in CSS.

6. Here let’s try to change the HEX color and the thickness of the lines in the loader by changing values next to color and border:

   

7. Once you’re done editing, please hit Save options and reload the front-end of your site to see the result:

   

Feel free to check the detailed video tutorial below:

WordPress. How to change pages pre-loader