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

For awesome preloader, please complete the three parts in this article.

  • 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: Applying Pre-loader Code to Master Page ) of this article.
  • 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 on Site Customization Tile



And then on the Customize my site button



Now the branding and Customization tool will be opened to 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 pre-loader, 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 on the Copy button, to copy the auto-generated preloader code into your clipboard.



Note: Clicking publish will not set a preloader for your site, it will just save the settings you have to choose for the preloader 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, look for seattle.html file, if you're using Oslo master page, then look for oslo.html file, for the purpose of this article we will demonstrate applying the pre-loader on a seattle master page.


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


Select your master page HTML file, then Check Out, and 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 pre-loader code:

  • Comments are surrounding the preloader code, to make it easy for you to spot the start and end of pre-loader 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 on 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 on Check In button



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

To do so, Select your master page, and click on the Publish button from the ribbon bar, as shown next



To proceed with publishing click on 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.


Part 3: Solving Internet Explorer Compatibility Issue

Preloader is not working nicely on IE. Help!


The problem

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 preloader is not animating nor the preloader icon spinning.


If this is the case with you, it means 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.


The Solution

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


Change the following HTML meta tag from:


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


Into this


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


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


Bonus :)


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

This 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 a non-SharePoint sites, and it will work the same way it works on SharePoint sites.


Happy Preloading!