> 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>