# Loading page
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
```
[state:loading]
```
## 🏷️ **How to add the tag**
1\. Create a standalone loading screen design.
{% hint style="info" %}
**Pro tip:** use the [Lottie component](https://docs.bravostudio.app/bravo-tags/components/component-lottie) to easily add a Lottie animation in your intro.
{% endhint %}
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](https://docs.bravostudio.app/bravo-tags/loading-experience/broken-reference) as usual.
6\. Preview the custom loading screen on Bravo Vision. 🚀
{% hint style="info" %}
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.
{% endhint %}
## 💾 Example files
Duplicate the files below to see how to set it up!
{% embed url="" %}
{% @figma/embed fileId="dedkxpF23DnniDkjZnqehd" nodeId="453:36" url="" %}
{% file src="" %}
Custom Loading.xd
{% endfile %}
