Loading Screen
By default, the Visual Component will display a βloadingβ splash screen over the canvas while the Visual instance, product, and assets load. Dopple provides a variety of built-in loading screen options to pick from, but a custom loading screen may be placed over the Visual Component while products are being loaded.
Choosing a default loading screenβ
Out of the box, Dopple provides three different loading screen options to pick from:
defaultScreen
β this is the default option if another loading screen is not specified.animatedCube
Previews:
defaultScreen
animatedCube
To set one of these options as your loading screen, add the loading-screen-type
attribute to the Visual Component:
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" loading-screen-type="animatedCube">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
Full code exampleβ
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
</head>
<body>
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" loading-screen-type="animatedCube">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
</body>
</html>
Displaying a custom loading screenβ
A custom loading screen may be displayed by positioning an element (such as a <div>
or <img>
) above the Visual Component on your page, then hiding this element as soon as the product has finished loading.
To do this, wrap the <atlatl-visual>
and the custom loading screen element in a container element, then absolutely position the loading screen element above the Visual Component using CSS and giving the loading screen element an opaque background color.
<div class="container">
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
<div class="custom-loading-screen">
<span>Loading...</span>
</div>
</div>
.container {
position: relative;
}
.custom-loading-screen {
background-color: #E0E0E0;
inset: 0;
position: absolute;
z-index: 2;
}
Hiding a custom loading screenβ
To hide the custom loading screen once the product has finished loading, await atlatlVisual.ready()
to resolve before adding or removing your loading screenβs visibility classes accordingly.
.custom-loading-screen.done-loading {
visibility: hidden;
}
// Hide the custom loading screen once the page loads and Dopple Visual is ready
window.addEventListener('load', async () => {
const atlatlVisual = document.querySelector('atlatl-visual')
await atlatlVisual.ready()
document.querySelector('.custom-loading-screen').classList.add('done-loading')
})
Full code exampleβ
- HTML
- CSS
- JS
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="https://builds.dopple.io/atlatl-visual-api/releases/current/index.js" defer></script>
<!-- Link to custom scripts -->
<script src="scripts.js" defer></script>
<!-- Link to custom styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
<div class="custom-loading-screen">
<span>Loading...</span>
</div>
</div>
</body>
</html>
.container {
position: relative;
}
.custom-loading-screen {
align-items: center;
background-color: #E0E0E0;
display: flex;
inset: 0;
justify-content: center;
position: absolute;
transition: opacity 1s linear, visibility 1s linear;
z-index: 2;
}
.custom-loading-screen.done-loading {
opacity: 0;
visibility: hidden;
}
atlatl-visual {
height: 640px;
width: 100%;
}
let myLoadingScreenElement = document.querySelector('.custom-loading-screen')
// Hide the custom loading screen once the page loads and Dopple Visual is ready
window.addEventListener('load', async () => {
const atlatlVisual = document.querySelector('atlatl-visual')
await atlatlVisual.ready()
myLoadingScreenElement.classList.add('done-loading')
})