# Custom Loading UI

## Overview

The Custom Loading UI feature allows you to personalize your project’s loading experience, delivering a branded and engaging touch while users wait for their session to begin. This guide outlines the available customization options and how to use them effectively.

***

## What it does?

The Custom Loading UI module enables you to:

* **Upload a custom logo** to be displayed during the loading process.
* **Add a splash screen** (image or short video) to enhance visual appeal.
* **Set the position of your logo** on the screen (Top Left, Top Right, Bottom Left, Bottom Right).
* **Choose the loading animation style** (Text Only or Throbber).
* **Customize loading messages** for each stage of the connection and setup process.

***

## **Why It Matters**

Customizing your loading UI helps you:

* Deliver a branded experience right from the first interaction.
* Keep users engaged with custom visuals and messages during load times.
* Communicate progress and reassure users with tailored messages.
* Differentiate your project and create a memorable first impression.

***

## Key Options & Features

#### 1. **Custom Logo**

* **Supported formats:** JPG, PNG, GIF
* **Max file size:** 500KB
* **Logo Position:** Select from Top Left, Top Right, Bottom Left, or Bottom Right.
* This logo will be shown throughout the loading process and the stream session, reinforcing your brand.

#### 2. **Splash Screen**

* **Supported formats:** JPG, PNG, GIF, MP4 (for short videos)
* **Max file size:** 1MB
* A splash screen appears during loading, allowing you to display marketing images, intro videos, or brand visuals.

#### 3. **Loading Animation Style**

* Choose between **Text Only** or **Throbber** (animated spinner).
* Preview your selection in real-time on the dashboard.

#### 4. **Custom Loading Messages**

* Display custom messages at each stage of the loading process:
  * **Connecting to Server**
  * **Launching Experience**
  * **Finalizing Setup**
* These messages can be used to inform, entertain, or guide users as the session initializes.
* Easily reset to default at any time.

***

## How to Use

* **Navigate to the Loading UI tab** in your project dashboard.
* **Upload your custom logo** and choose its position.
* **Upload a splash screen** (image or video) for a personalized loading screen.
* **Select your preferred animation style.**
* **Edit the loading messages** to fit your brand tone or keep users informed.
* Click **Save** to apply changes or **Reset to Default** to revert.

***

## Tips & Best Practices

* Use high-contrast logos and splash screens for the best visibility.
* Keep file sizes within limits for optimal loading speed.
* Short, friendly loading messages improve user experience.
* If using video for splash screens, keep it under 5 seconds for minimal impact on load times.

***

## Advanced Customization

If you’re looking for a more tailored loading experience, you can refer to our [Web SDK Custom Loading Screen](https://docs.streampixel.io/resources/getting-started/ui-and-customization/custom-loading-screen) guide. It provides step-by-step instructions and sample code for developers who want to go beyond the dashboard options and fully customize the loading UI through code.