---
title: Unity Custom Loading
slug: unity-custom-loading
docTags:
createdAt: 2024-06-27T10:39:12.763Z
---
The AirConsole Unity Plugin allows you to easily customize your Unity WebGL loading screen and loading bar.
:::BlockQuote
**Note**: Make sure your AirConsole Unity Plugin is updated to the [newest version ](https://github.com/AirConsole/airconsole-unity-plugin/tree/master)and that your Unity Editor is version 5.6 or higher.
:::
### *Loading Screen Background*
To replace the loading screen image, simply replace the png file found in `Assets/WebGLTemplates/AirConsole/TemplateData`.
### *Loading Bar customization*
You can customize the loading bar (Only works for the WebGL build, not AndroidTV) so that it matches your background image in size, placement and colors.
Once the game is fully loaded, both the bar and background disappear, revealing the loading screen image below.
**Unity 2019 and down**
Make sure that you selected the **AirConsole **WebGL template:
::Image[]{src="https://api.archbee.com/api/optimize/eODGJqzvP6Walum1Gn5N9/SOrJvhoZma9nmk44tSfuI_image.png" size="60" width="300" height="111" position="center" showCaption="false"}
Go to your **index.html **that can be found in`Assets/WebGLTemplates/AirConsole`and update the`progress_bar_config`object.
:::BlockQuote
function initAirConsole() \{
var unity\_web\_config = \{
width: 16,
height: 9
};
var progress\_bar\_config = \{
left: "35%",
top: "65%",
width: "30%",
height: "5%",
background: "#000000",
color: "#ADEE00"
};
window\.app = new App('game', unity\_web\_config, progress\_bar\_config);
}
:::
- **left **and **top**
Determine where the top left corner of your loading bar will be placed.
- **width **and **height**
Determine how wide and tall the loading bar will be.
- **background**
Determines the color of your “empty” loading bar. This color will gradually be hidden by the progressing bar drawn above it.
- **color**
Determines the color of the actual progress bar. This color will gradually grow to match the loading progress.
**Unity 2020 and up**
For Unity versions 2020 and up the customization is simpler and you don't have to edit any HTML or JS files directly. Make sure that you selected the **AirConsole-2020 **WebGL template in the **Player settings**.
Go to **Edit Project Settings > Player > Resolution and Presentation **and edit the **Progress bar **fields.
::Image[]{src="https://api.archbee.com/api/optimize/eODGJqzvP6Walum1Gn5N9/pqeRDkOFz1LT3wC6cNwmL_image.png" size="80" width="400" height="218" position="center" showCaption="false"}
- Progress bar **background color.**
Determines the color of your “empty” loading bar. This color will gradually be hidden by the progressing bar drawn above it.
- Progress bar **color.**
Determines the color of the actual progress bar. This color will gradually grow to match the loading progress.
- Progress bar **height **and **width.**
Determine how wide and tall the loading bar will be.
- Progress bar offset **top **and **left.**
Determine where the top left corner of your loading bar will be placed.
The values for Progress bar **height/width **and **top/left **are percentage based.
Make sure that you specify height/width **and **top/left values, otherwise it won't show the custom loading screen.
:::BlockQuote
**Note:** that upon exporting the game to WebGL, `index.html` will be renamed to `screen.html` by the Post Build Process.
:::