Skip to main content
Customise the Loading Screen

Learn how to make the loading screen part of your AR experience by adding video, text, images and animated spinners.

Jens Bäckvall avatar
Written by Jens Bäckvall
Updated over a year ago

How Loading Works

When a user opens your Hololink on their device, it starts by downloading the assets to ensure a smooth experience.
This usually takes a couple of seconds and we've set up Hololink so that you can take advantage of this time to introduce the experience.

Here are 2 examples

The examples above are set up in the Custom Branding editor that is opened by clicking the paintbrush icon in the storyboard:

Each loading screen consists of:

  1. A background, which can contain an image, a video, a color shader or simply a background colour.

  2. A Preloader, where the user taps the screen to start the Hololink.

  3. A Loader, which can be a spinner or a loading animation that is shown right before the first scene in your Hololink starts.

  4. Right before the Hololink starts, the mobile browser will ask for permission to use the camera. This cannot be styled as it is a standard function of all browsers.

The above are edited in one of the tabs in the Custom Branding editor:

For more detail on the setup, please read below.

How to Set It all up, step by step

  1. First open the Custom Loader Editor by clicking on the paintbrush icon in the Storyboard.

  2. You now see 4 tabs entitled General, Background, Preloader overlay and Loader overlay.

    On the right side of the screen you see a preview of what your loading screen currently looks like. This can be set to different aspect ratios, to see what it will look like on the most common smartphones on the market.

    At the bottom you will see two buttons labeled Reset to default and Reload preview.

    1. The reset button removes all of your changes and replaces them with the default Hololink layout.

    2. The reload button restarts the preview that you see on the right of the screen.

  3. In the General tab you can do the following:

    1. Change the title. This is what is shown on the tab in your browser.

    2. Click the favicon to change it. This is the small image you see next to the title on a tab in your browser.

    3. Change the terms and conditions, both text and link. By default there is a link to Hololink's terms and conditions, but you will probably want to add your own link if you have one.

  4. In the Background tab, you can change the general look of the entire loading experience.

    You can:

    1. Add an image layer that covers the entire screen. This can be a static image like a JPG/JPEG or PNG or it can be an animated GIF or an animated PNG. You can also add a semi transparent PNG so that a video layer is visible through parts of the image.

    2. Add a video that covers the entire screen. If the video does not have the correct aspect ratio, it will automatically be cropped with the centre of the video placed in the centre of the screen.

    3. Toggle a Color cycle shader, which is a predefined rainbow of colours that slowly changes across the screen. The Color cycle shader and the video will not both be visible, so you will only need either one of these.

    4. Choose the background colour. This is the colour users will see if you choose not to use the three above. But in addition, it is also the colour any top bar will be in browsers, such as iOS or Chrome on the users phone, so set it to a color that marches your design.

  5. In the Preloader overlay tab, you can choose how you ask your users to start the experience, choosing between the two options, or combining them to suit your needs. You can:

    1. Use the Dialog box overlay, adding your own text:

    2. Use the full screen image overlay, adding text to that, either as an image that entirely covers the screen or as a transparent or semi-transparent PNG:

  6. In the Loader overlay tab, you can set a loading spinner or pulse and add an additional image to appear behind it. You can:

    1. Add any image to be your loading symbol. It can be a static image or an animated image like a GIF or PNG.

    2. Set the width and vertical position of your loading symbol.

    3. Set the loading symbol to rotate, pulse or just stay in the same position. The last choice might be because you have added an animated loading text.

    4. Set a full screen image that is placed between the background and your loading symbol.

Wrap Up

As you can see, you can customise every aspect of the loading screen and you can combine the possibilities in any way that you want to perfectly match your brand, story or communication style.

The only thing that you have to remember is that the user must tap the screen once before the loading symbol starts, but how you do this is entirely up to you.

Here are some creative ways of doing this:

For an experience showcasing organic wine:

Q: Are you of legal drinking age in your country?

A: Yes

For a Treasure Hunt

Q: Are you ready to find the treasure and win cool prizes?

A: Ay, Ay Captain

For a Climate Challenge

Q: Can you do the right thing and become a climate superhero?

A: I can!

Have fun creating your own custom loading flow to make your Hololink stand out.

Did this answer your question?