In this article, we will show you how you can add a modern Preloader to your SharePoint sites. This will improve the user experience significantly. 



Prerequisites

Editing master page is required if you want to add best pre-loading experience. The following features are required to edit the master page of the site and site collection:

  1. Navigate to Settings > Site Settings of the Parent Site.
  2. Under Site Collection Administration click on the Site collection features link.
  3. Enable the SharePoint Server Publishing Infrastructure feature by clicking the Activate button.
  4. Navigate to Settings > Site Settings of your Site. 
  5. Under Site Settings click on the Manage site features link. 
  6. Enable the SharePoint Server Publishing site features click the Activate button.

Before We Start

  • This article requires a basic knowledge of the HTML language, and how to edit HTML pages.
  • If you came to this article from the Branding and Customization Tool, and you have already configured your desired Preloader, you can jump right into ( Part 2: Add Preloader Code to Master Page ) of this article.
  • For the best user experience, we recommend deactivating the Minimal Download Strategy MDS feature ( Site Settings > Manage site features )
  • Before editing your master page file, you need to know which master page is applied to your site, to know this, go to Site Settings > Site Master Page Settings, and see the value of the drop-down menu as shown in the next figure:



Note: In case the "Inherit site master page from parent of this site," you need to go to parent site's Site Settings > Site Master Page Settings


Part 1: Building Your Custom Preloader

You need to generate the code for your awesome Preloader with your branding colors and maybe your company logo


First, we need to activate the Branding and Customization tool, by going to Site Settings:



Then to ShortPoint Dashboard:


Click the Site Customization Tile:



And then click the Customize my site button:



Now the branding and Customization tool will be opened on the left side of your website. 

Navigate to Utilities > Preloader:



For the purpose of this article, I am going to set the following values for the Preloader, but feel free to customize them to fit your needs.

  • Background Color: white
  • Preloader Icon: Circle
  • Preloader Size: 60
  • Preloader Icon Color: #3aaae1 ( light blue color )



Note: If you enable the Show Logo option, you can add your brand logo, and it will appear on top of the Preloader spinner


At any time while you are customizing the Preloader, you can hit the Preview button to see how it will look.

 

And in case you are happy with it, click the Copy button to copy the auto-generated preloader code into your clipboard.



Important note: Clicking Publish will NOT set a Preloader for your site, it will just save the settings you have done to the Preloader.


Part 2: Add Preloader Code to Master Page

Preloader code will work best if added to the very top of web pages code. No better place than the top of the <head>


Now that you have the code for your Preloader, it's time to put it into the Master page.

Go to Site Settings:




Then to Master pages and page layouts:


Look for the HTML version of your master page. If you're using Seattle as a master page for the site, find the seattle.html file, if you're using Oslo master page, then you need the oslo.html file. For the purpose of this article we will demonstrate applying the Preloader on a Seattle master page.


If you have a trouble finding your master page, please use this guide.


Note: ShortPoint Preloader does not depend on the kind of your master page, and it can even be applied to customized master pages.


  1. Select your master page HTML file.
  2. Then click Check Out.
  3. Then click Download a Copy, as shown on the next image:



Note: After the file had been downloaded into your machine, it will be good to take a copy of this file as a backup just in case things went wrong so that you can upload the clean master page back.


Open the downloaded file into a text editor of your choice, and paste the preloader right after the <head runat="server"> HTML tag, as shown in the next recording:




Notes about preloader code:

  • Comments are surrounding the preloader code to make it easy for you to spot the start and end of preloader code;
  • In case you want to remove it later, remove all the starting comment, code between, and the ending comment ( see next figure for more info ).



Now that you have updated the master page HTML file, its time to put it back into the server.

 

On the ribbon bar, click Upload Document button:



Now choose the file you have just edited, from the Choose File button, then Click OK to upload, as shown in the next image:



Another dialog will appear asking you to enter some information about the master page. Just click Check In button:



One last step you need to do is to let the visitor of your site see your Preloader, which is to publish this master page.

 

To do that please Select your master page, and click the Publish button from the ribbon bar, as shown in the next image:



To proceed with publishing click OK on the next dialog:



Now go and refresh any page on the site, to see your beautiful Preloader spinning, providing your site visitors a better user experience.


Note: If you do not publish your master page file, your site visitors might see a "Sign In" link while Preloader is spinning, and in some cases, they might get an authentication prompt, so for the best experience, make sure to publish the master page always.


Part 3: Solving Internet Explorer Compatibility Issue

Preloader is not working nicely on IE. Help!


The Preloader is supposed to work on IE10+, Edge, Firefox, Chrome and Opera Browsers. However sometimes if you open your site page on either IE10 or IE11, you might find that neither Preloader is animating nor the Preloader icon spinning.


If this is the case there are two possible causes for this problem, please check them below.


Cause #1

It might be that SharePoint is forcing your IE to render using IE9 Document Mode ( it will behave as IE9 ), and that's why the spinner will not work.


Solution

You need to edit the master page, following the same steps mentioned above for pasting preloader code, and to do the following modification to the master page file:


1. Change the following HTML meta tag from:


<meta http-equiv="X-UA-Compatible" content="IE=9" />


To this:


<meta http-equiv="X-UA-Compatible" content="IE=edge" />


2. Then upload the master page file back, check in and publish.


Cause #2

If your IE shows a blue icon before the address, as in the next image, then it means that your IE will be forced to render using an earlier version of IE:


Solution

You need to contact your IT department and tell them to turn off the IE Enterprise Mode from the Group Policy Management tools.


Bonus :)


Did you know that the preloader code generated by ShortPoint Branding and Customization tool, is a platform agnostic?

It means you can add this preloader code into sites that do not have ShortPoint installed, and it will run there perfectly.


Even more: you can use it on non-SharePoint sites, and it will work the same way it works on SharePoint sites.


Happy Preloading!