It's me, Anas.
I am the one who created this article and everything about preloader. If you find this article complicated or need any help, you can schedule a call with me using this link and will help you setup awesome preloader on your site for free.
Happy Preloading :)
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.
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:
- Navigate to Settings -> Site Settings of the Parent Site
- Under Site Collection Administration click on the Site collection features link
- Enable the SharePoint Server Publishing Infrastructure feature by clicking the Activate button.
- Navigate to Settings -> Site Settings of your Site.
- Under Site Settings click on the Manage site features link.
- 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: Applying Pre-loader 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 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 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.
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 be even applied to customized master pages.
- Select your master page HTML file
- Then click Check Out
- 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 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.
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 preloader is not animating nor the preloader icon spinning.
If this is the case with you, there are two possible causes for this problem, please check them below:
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.
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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Then upload the master page file back, check in and publish.
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
You need to contact your IT department and tell them to turn off the IE Enterprise Mode from the Group Policy Management tools.
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 non-SharePoint sites, and it will work the same way it works on SharePoint sites.