> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/natively-platform/appearance/launch-screen.md).

# Loading Screen

### OS Sequence Behavior

* **Android:** When the app is launched, users will see the App Icon first, followed immediately by the Loading Screen.
* **iOS:** When the app is launched, users will see the Launch Screen first, followed by the Loading Screen.

### Loading Screen Elements

Your loading screen is completely modular and can be built using any combination of the following 4 key elements:

1. **Background Color:** Sets the base color fill for the entire screen.
2. **Text Field:** Displays custom text on top of the background. You can fully customize the string, font type, color, size, and vertical/horizontal alignment coordinates.
3. **Background Image:** Applies an image behind your text and foreground assets.
4. **Image (Foreground):** Places a foreground graphic or loader animation on top of your background.

#### Popular Combinations

Because these options use simple toggle switches, you can combine them however you like:

* Background Color only (Minimalist approach).
* Background Color + Text Field (Simple branding).
* Background Image only (Full-screen illustration).

**Natively Preview App Style:** For a dynamic experience, combine a Background Color, a Background Image, and a Foreground Image. 

{% hint style="info" %}
The Foreground Image tool supports `.gif` files, allowing you to use a custom animated spinning loader!
{% endhint %}

### Configuring the Background Image with AI

When you turn on the Background image toggle, you can leverage Natively's automated asset tools instead of manually resizing templates.

#### Method A: Describe with AI

As shown in the screenshot, you can dictate exactly what your background should look like:

1. Select the **Describe with AI** tab.
2. Enter your creative description (e.g., *"A fantasy elven warrior"*).
3. Click **Generate background**.

<figure><img src="/files/vyZmIOqN7yDQwA1uTUjq" alt=""><figcaption></figcaption></figure>

#### Method B: Custom Image Upload

If you already have a design asset you want to use:

1. Select the **Upload image** tab.
2. Drag and drop your image file or click to browse.\
   **File Format Requirement:** Your uploaded reference file must be in PNG or JPG format.
3. Natively will automatically process your asset into a standardized mobile background layout.

<figure><img src="/files/Vt2ASj7IenjfXXkeu31x" alt=""><figcaption></figcaption></figure>

### Previewing and Managing Assets

Once an image is generated or uploaded, the layout syncs up with the interactive live preview on the right side of your dashboard screen.

* **Reviewing your design:** Check the mock device frame to verify that your layout components do not clash and that text elements remain readable.
* **Regenerating:** If a generated background or uploaded graphic is not sitting right in the phone frame, simply click the red **Trash Can** icon. This removes the asset, allowing you to test a new prompt or upload an adjusted file.
* **Saving:** When everything looks perfect, click Next/Save to lock in your settings.

<figure><img src="/files/DGSHjKclrTQihosbGYpv" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.buildnatively.com/natively-platform/appearance/launch-screen.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.