Try ShortPoint nowIn this article we will show you how you can add a modern Preloader to your SharePoint sites. This will improve the user experience significantly.
Here's how it would look like:
TABLE OF CONTENTS
- Prerequisites
- Before we begin
- Step 1: Building Your Custom Preloader
- Step 2: Add Preloader Code to Master Pages
- Additional: Solving Internet Explorer Compatibility Issue
- Bonus
Prerequisites
Editing master page is required if you want to add the best Preloading 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 the Site Collection Administration category, open the Site collection features link.
- Enable the SharePoint Server Publishing Infrastructure feature by clicking the Activate button.
- Go back to Site Settings of your Site.
- Under the Site Actions category, open the Manage site features link.
- Enable the SharePoint Server Publishing feature by clicking the Activate button.
Before we begin
- This article requires a basic knowledge of the HTML language, and how to edit HTML pages.
- If you came to this article from the Theme Builder 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 check this, go to the Site Settings > Site Master Page Settings, and see the value of the drop-down menu as shown in the next figure:
Note: In case of having the Inherit site master page from parent of this site option, you need to go to parent site's Site Settings > Site Master Page Settings.
Step 1: Building Your Custom Preloader
You need to generate the code for your preloader with your branding colors and the company logo if you wish to use it.
First, open the ShortPoint Theme Builder (Site contents/Site settings > ShortPoint Dashboard > Theme Builder > Customize my site).
Navigate to Utilities > Preloader:
Note: For more information about ShortPoint Theme Builder, please visit Getting Started with ShortPoint Theme Builder-Classic SharePoint.
For the purpose of this article, we are 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
Note: If you enable the Show Logo option, you can add your brand logo, and it will appear on top of the Preloader spinner.Info: If you want to have your brand logo only as your preloader (without spinner), you may follow the instructions in How to Show Only the Logo Image (or a Custom Spinner) in the ShortPoint Preloader.
At any time, while you are customizing the Preloader, you can hit the Preview button (1) to see how it will look. Once you are happy with it, click the Copy button (2) to copy the auto-generated preloader code into your clipboard:
Important: Clicking Publish will NOT set a Preloader for your site, it will just save the settings you have done to the Preloader.
Step 2: Add Preloader Code to Master Pages
Preloader code will work the best if add it to the very top of web pages code. There is no better place for that than the top of the <head> tag.
Now that you have the code for your Preloader, it's time to put it into the Master page.
2.1 Download the HTML file from Master pages (Master pages and page layouts)
Open the Site settings. Under the Web Designer Galleries category choose the Master pages (or Master pages and page layouts):
Find the HTML version of your master page:
- If you're using Seattle as a master page for the site, look for the seattle.html file
- If you're using Oslo master page, look for the oslo.html file.
Info: If you have trouble finding your master page, please check How to Find the Master Page solution.
Note: ShortPoint Preloader does not depend on the kind of your master page. It can even be applied to customized master pages.
For the purpose of this article we will demonstrate applying the Preloader on a Seattle master page.
- Select your master page HTML file.
- Click Check Out.
- Click Download a Copy.
Note: After the file is downloaded, it will be a good idea to make a copy of this file as a backup, so you can upload the clean master page back in case something goes wrong.
2.2 Paste the Preloader code to the HTML file
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.
Open the downloaded HTML file in the text editor of your choice.
Paste the preloader code (from the Part 1) right after the <head runat="server"> HTML tag, as shown in the next animation:
Notes:
1. Comments that are surrounding the preloader code, make it easy for you to spot the start and end of preloader code.
2. If you want to remove the preloader later, delete the starting comment, code between, and the ending comment as shown below:
After you updated and saved the master page HTML file, it's time to put it back to the server.
2.3 Upload the HTML file back to Master page (Master page and page layouts)
Click Upload Document button from the ribbon:
Click the Choose File button to choose the edited master page HTML file and then click OK to upload it:
Another dialog window will appear asking you to enter some information about the master page. Clicking the Check In button is enough:
In order to make the Preloader visible to your site's visitors you need to publish this master page:
- Select your master page.
- Click the Publish button from the ribbon bar.
Then click OK to confirm the publishing:
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 always publish the master page.
That's it! Now, go and refresh any page on the site to see your beautiful Preloader spinning, providing your site visitors a better user experience.
Additional: 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 you might find that neither Preloader is animating nor the Preloader icon is spinning if you open your site page on either IE10 or IE11. There are two possible reasons of this issue:
Reason 1: SharePoint is forcing your IE to render using IE9 Document Mode
If IE is rendering using IE9, it will behave as IE9, and that is 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 modifications to the master page file:
Step 1. Change the HTML <meta> tag
Replace the following:
<meta data-fr-http-equiv="X-UA-Compatible" content="IE=10" />
with this:
<meta data-fr-http-equiv="X-UA-Compatible" content="IE=Edge" />
Step 2. Upload the master page file back, check in and publish
Reason 2: Enterprise Mode is On
If your IE shows a blue icon before the address, as on the screenshot below, 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 Theme Builder is 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!
Related articles:
- How to Show Only the Logo Image (or a Custom Spinner) in the ShortPoint Preloader
- How to Improve User Experience with Base64 Images When Using Custom Preloader
- How to Find the SharePoint Master Page
- How to Set a ShortPoint Preloader in Case Seattle.Html Is Missing
- How to Turn off the ShortPoint Preloader
