Maybe have your own GIF animated spinner image, and would like to apply it on your site instead of the default preloaders that comes out-of-the-box with the ShortPoint Theme Builder? 

Or Maybe you wish to hide the default preloader spinner, and just Show your company logo.

Well, this article will explain it to you.



Before we start:

This article assumes that you already know how to add a preloader to your site, and this article will only give you few lines of code to add to the auto-generated preloader code from the ShortPoint Theme Builder, 

If you do not have an idea about how to generate a preloader code from the ShortPoint Theme Builder, you can refer to the following support article:


Now let's start!


Step 1:

Add a link to your GIF spinner,

Using the same article mentioned in the previous section, you need to open the ShortPoint Theme Builder, navigate to ( Utilitiles > Preloader ),

Then add the link to your GIF spinner, see the screenshot below.



Step 2: 

Copy the generated preloader code using the blue copy button as highlighted in the next image,

At this time, if you click on the preview button, you will see both spinners on the page ( your animated GIF, and the default ShortPoint spinner )




Step 3:

Paste the generated into a text editor, 

Then copy the following code, and paste it right before the generated preloader code into the same text editor.


<!--MS:
<style type="text/css">-->
#shortpointPreloader .sk-circle {
    display: none !important;
}
<!--ME: </style>-->


Now in your text editor, your preloader code should look similar to the following screenshot:



Step 4:


Now you can use the code that you have right now to inject it into your masterpage file, by following the steps from the same Add Modern Preloader to SharePoint Sites article, starting from ( Part 2: Add Preloader Code to Master Page )



Enjoy.