Contents

• Introduction
• Scope
• Process for Customizing loading Screen
• Options of customization
• Example of the customized screen
• Before and After Applying Loading Screen Customization

Introduction

This article provides instructions on the various steps to be followed to customize your loading screen which appears just before the AR experience loads. 

Scope

This document includes information on the following:

• Process for customizing loading screen
• Options of customization
• An example of the customized screen
• An overview of before and after the loading screen customization

Process for Customizing loading Screen

Follow the below steps to customize your loading screen:

• Login to the HUB
• Click on 'Create A WebAR Project' as shown in the image below:

• A pop-up will appear on the screening providing you with options to select the type of AR experience you wish to create. Choose a desired option from ‘Around the User’ or ‘on a printer marker’ as shown in image below:

• A pop-up will appear on the screen to provide a desired name for the Blipp. 
• Enter a desired name for the Blipp. 

Note: This will be your ‘Project Name’ 

• Click ‘Continue’
• You will be re-directed to the design canvas.

• From the top panel, click the   icon next to the project name and select the ‘Settings’ icon as shown in the image below:

• Click on the option ‘Custom Loader Settings’ as shown in the image below:

• You will be directed towards a screen to define your customization.

Options of customization

There are various customizations that you can define for the loading screen. 

Follow the steps below:

• Click the check-box next to ‘Enable Loader Settings’.
• Select a desired colour for the following:

1. Font colour- defines the colour of the text 
2. Background colour  
3. Progress ring. 

• Click the   icon in the ‘Add image file’ section to upload an image of your choice and click ‘Done’

Note: This could be a logo image which would appear in the centre of the progress ring. The image size is recommended to be in the range of 150x150px.

Refer image below:

Example of the customized screen

The following image provides an overview of the customized loading screen:

Before and After Applying Loading Screen Customization

The following will be provide a brief on before and after customization of the loading screen:

  BEFORE                                                                            AFTER

Navigating the Interface                                                                                       Export Selection