Bravo Studio Help Center
Ask or search…
Comment on page

Loading page

The app page will display in place of the default Bravo loading screen.
The screen with this tag replaces the default Bravo loading screen with a custom design app page.
📍 Where to add the tag: A top-level app page
The loading screen will only appear for screens that need to load external data.

🏷️ How to add the tag

1. Create a standalone loading screen design.
Pro tip: use the Lottie component to easily add a Lottie animation in your intro.
2. Add a container around the design.
3. Paste the tag into the layer name of the top-level app page.
4.Import the design file into Bravo.
5. Set up your binding as usual.
6. Preview the custom loading screen on Bravo Vision. 🚀
Tip: If you want to show the loading animation on top of the screen that is being loaded, add a transparent background to the screen with the [state:loading] tag.

💾 Example files

Duplicate the files below to see how to set it up!
Bravo Sample - Custom
Custom Loading.xd