How to Change Page Preloader with Custom One

Page Preloader is an animated preloading screen which shows up when your site’s page loads.
From this tutorial you’ll find out how to change page preloader for your website.

If you don’t know how to enable page preloader, please, proceed to reading How to Deactivate Page Preloader. Applying Changes tutorial.

Changing Page Preloader
  1. If you want to change a preloader, first, you should choose the one you want to appear on your site. For one, you can choose the one from Codepen collection of preloaders.
  2. Click on one of the preloaders you’ve selected for your website. You’ll see three different blocks of code, which you need to add to your site in order to use the chosen preloader. Some of the preloaders require adding codes in HTML and CSS files, while others have also JS code.
  3. Let’s navigate to wp-content/themes/theme-name/inc folder. Here locate template-tags.php file. Download it from your server to the hard drive and open it in the code editor in order to make some changes in it.
  4. Hit Ctrl+F hotkeys and look for the default page preloader code. You should replace it your own code for the preloader. It may look as follows.

    https://gist.github.com/Shininglow/a1ed8143b6988b3702cc9101c6386205

  5. Keep in mind, that in this example we used HTML code passage from the HTML code tray on Codepen. You can add your own HTML code into this function (don’t forget to replace theme-name with your actual theme name in order to make it work.
  6. After everything is done upload the file back to its previous location on the server.
  7. Now let’s proceed to adding CSS code. Navigate to wp-content/themes/theme-name/assets/sass/elements directory and download  _page-preloader.scss file to your hard drive.
  8. You need to open it in the code editor.
  9. In the HTML we used preloader id name, so we’re going to use it as a class in the CSS code (.div#preloader class).
  10. Add the CSS code to the file (if there is another page preloader, then replace it with your own code copied from the CSS code tray. In our example it will be the following code.

    https://gist.github.com/Shininglow/691ffa405c50a7ec3c4548479be36920

  11. Upload the file back to the server in order to replace the old one.
  12. We’re almost finished, but there is still the JS code passage we need to add. To do it, please, navigate to wp-content/themes/theme/name/assets/js folder. Here download theme-script.js file and open it in the code editor.
  13. In the document_ready_render: function()  you can see the JS functions list. Please, add the following one to the end of the list.
     this.preloader_figure( this );
    
  14. Now add the following lines of code at the end of the file.

    https://gist.github.com/Shininglow/f4bbac63289bf89f86a16d710037b5e3

  15. Feel free to replace the JS function with your own from the JS code tray.
  16. Now you’re welcome to update your website’s page in browser to view your new preloader! As a result, you’ll see your new preloader while the webpage still loads.
Ready-to-use website