Not amused by the default preloaders that comes out-of-the-box? Want to apply your own GIF animated spinner image as a preloader on your site? Or maybe you wish to hide the default preloader spinner, and just show your company logo? 

If you answered yes to the above question(s), this article is for you.

TABLE OF CONTENTS

• Before we begin
• Step 1. Add a spinner link
• Step 2. Copy the generated preloader code
• Step 3. Edit the preloader code
• Step 4. Update your preloader by adding it to the master page

Before we begin

• This article assumes that you already know how to add a preloader to your site, and this article will only give you a 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: Add a Preloader to SharePoint Classic Sites.

Step 1. Add a spinner link

Open the ShortPoint Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder). 

Navigate to the Utilitiles > Preloader.

Add the link to your GIF spinner to the Logo URL field:

Step 2. Copy the generated preloader code

Click the blue Copy button:

At this time, if you click the Preview button, you will see both spinners on the page: your animated GIF, and the default ShortPoint spinner.

Step 3. Edit the preloader code

Paste the generated into a text editor.

Copy the following code, and paste it right before the generated preloader code:

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

Important: Please be careful with pasting the code to the HTML file, as pasting it incorrectly may cause your page to break and not be useful.

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

Step 4. Update your preloader by adding it to the master page

Now you can use the modified code to inject it into your master page file.

Follow the steps of the Add a Preloader to SharePoint Classic Sites tutorial (you need the Part 2: Add Preloader Code to Master Page).

Related articles:

• Add a Preloader to SharePoint Classic Sites