Docy Child

Animated Loading Screen

Estimated reading: 2 minutes

WebXR.tools VTO Studio  allows you to create custom 3D experiences for exploring and visualizing 3D models in browser along with the ability to add animated loading screens. The loading screen appears while the assets in the experience are loaded.

In this guide, we’ll walk how to add an animated loading using Lottie Animations.

Prerequisites

Open Project

To get started, login to the webXR.tools dashboard and open your existing VTO project.
Open VTO Project

Once the project loads, select the Loader scene from the list in the left side panel.

Customize the loader

When the Loader scene is selected the settings will appear in the right panel. The loader image can be a static image (jpg, png, svg), or a Lottie animation. Click the 📁 icon to open the Asset Manager and drag-n-drop your Lottie JSON file to upload the asset.

Upload Lottie JSON

Once you’ve uploaded your JSON file, customize the size of the animation using the Width slider.

Lottie Animation

Save, Publish & Preview

Now we are ready to publish our experience and preview it. Click the “Save & Publish” button in the upper right corner. A small grey icon will appear while the project is saving, once it has finished saving a green dot will appear.

Save and Publish
Click  View Live Project button to view your 3D virtual preview experience in a new tab.
Custom Lottie Intro Animation
Share this Doc
CONTENTS