Skip to Content
APIUI Elementsa3d-loading-screen

a3d-loading-screen

Description

<a3d-loading-screen> is a UI component to display a loading screen on top of the a3d-viewer.

Installation

Using npm :

npm install @a3d-ui/loading-screen

Using yarn :

yarn add @a3d-ui/loading-screen

Importing the a3d-loading-screen :

import '@a3d-ui/loading-screen'

Usage

Automatic loading screen

a3d-loading-screen can be automatically shown and hidden by assigning it to the loadingScreen slot of a3d-viewer

<a3d-viewer>
  <a3d-scene>
    <!--- A3D web-components -->
  </a3d-scene>
  <a3d-loading-screen slot="loadingScreen"></a3d-loading-screen>
</a3d-viewer>

Updating content

You can change the content of a3d-loading-screen by simply adding children.
By doing that, all the default content will be replaced by yours.

<a3d-viewer id="myViewer">
  <a3d-scene>
    <!--- A3D web-components -->
  </a3d-scene>
  <a3d-loading-screen id="myLoadingScreen">
    <h1>New content title</h1>
    <p>new content text</p>
    <img src="IMAGE_URL" />
  </a3d-loading-screen>
</a3d-viewer>

Attributes

loading-text

The default-text attribute provides you a way to customize the text visible in the a3d-loading-screen. Default value is “Loading…”.
Text can also be changed on the fly using the defaultText property.

<a3d-viewer id="myViewer">
  <a3d-scene>
    <!--- A3D web-components -->
  </a3d-scene>
  <a3d-loading-screen
    id="myLoadingScreen"
    default-text="loading text..."
  ></a3d-loading-screen>
</a3d-viewer>
 
<script>
  const myLoadingScreen = document.querySelector('#myLoadingScreen')
 
  myLoadingScreen.defaultText = 'new loading text...'
</script>
Last updated on
a3d-buttona3d-toolbar