I decided to use the Preloader Plus WordPress plugin for this.

I’m writing this because I was trying to add a preloader animation when I realized my caching plugin, LiteSpeed Cache, decided it wanted to do it’s magic which broke the correct lineup of when the CSS file was supposed to make the animation play first. To solve this, we need to stop this CSS file from being cached. Here I’ll demonstrate how to hide this in LiteSpeed Cache.

Below insert your website where you see WEBSITE and enter your admin folder for WP-ADMIN. You may have left your admin folder default in which case it will be wp-admin.

https://WEBSITE/WP-ADMIN/admin.php?page=litespeed-page_optm#settings_tuning

This should land you at your respective Tuning tab within the Page Optimization section of the LiteSpeed Cache plugin on your WordPress, add the following to the CSS Exclusions

preloader-plus.min.css

After you save and purge the cache you should have a fully functional preloader animation!

Congratulations!

EDIT: Then I opened Firefox -_- The loader actually just keeps going and only on one of the websites out of 3 I tested so it must be a setting within LiteSpeed Cache. I will check and see if I can’t fix this then report back. If that doesn’t work then I’ll look into this.