Skip to main content

Customizing the Load Screen

8th Wall's XRExtras library provides modules that handle the most common WebAR application needs, including the load screen, social link-out flows and error handling.

The Loading module displays a loading overlay and camera permissions prompt while libraries are loading, and while the camera is starting up. It's the first thing your users see when they enter your WebAR experience.

This section describes how to customize the loading screen by providing values that change the color, load spinner, and load animation to match the overall design of your experience.

Note: All projects must display the Powered by 8th Wall badge on the loading page. It's included by default in the Loading Module and cannot be removed.

ID's / Classes to override

Loading ScreeniOS (13+) Motion Sensor Prompt
  1. #requestingCameraPermissions
  2. #requestingCameraIcon
  3. #loadBackground
  4. #loadImage
  1. .prompt-box-8w
  2. .prompt-button-8w
  3. .button-primary-8w

To customize the text, you can use a MutationObserver. Please refer to code example below.

A-Frame component parameters

If you are using XRExtras with an A-Frame project, the xrextras-loading module makes it easy to customize the load screen via the following parameters:

cameraBackgroundColorHex ColorBackground color of the loading screen's top section behind the camera icon and text (See above. Loading Screen #1)
loadBackgroundColorHex ColorBackground color of the loading screen's lower section behind the loadImage (See above. Loading Screen #3)
loadImageIDThe ID of an image. The image needs to be an <a-asset> (See above. Loading Screen #4)
loadAnimationStringAnimation style of loadImage. Choose from spin (default), pulse, scale, or none

A-Frame Component Example

loadBackgroundColor: #007AFF;
cameraBackgroundColor: #5AC8FA;
loadImage: #myCustomImage;
loadAnimation: pulse"

<img id="myCustomImage" src="assets/my-custom-image.png">

Javascript/CSS method

const load = () => {
console.log('customizing loading spinner')
const loadImage = document.getElementById("loadImage")
if (loadImage) {
loadImage.src = require("./assets/my-custom-image.png")
window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load)

CSS example

#requestingCameraPermissions {
color: black !important;
background-color: white !important;
#requestingCameraIcon {
/* This changes the image from white to black */
filter: invert(1) !important;

.prompt-box-8w {
background-color: white !important;
color: #00FF00 !important;
.prompt-button-8w {
background-color: #0000FF !important;

.button-primary-8w {
background-color: #7611B7 !important;

iOS (13+) Motion Sensor Prompt Text Customization

let inDom = false
const observer = new MutationObserver(() => {
if (document.querySelector('.prompt-box-8w')) {
if (!inDom) {
document.querySelector('.prompt-box-8w p').innerHTML = '<strong>My new text goes here</strong><br/><br/>Press Approve to continue.'
document.querySelector('.prompt-button-8w').innerHTML = 'Deny'
document.querySelector('.button-primary-8w').innerHTML = 'Approve'
inDom = true
} else if (inDom) {
inDom = false
observer.observe(document.body, {childList: true})