Creating a Loading Scene in Unity

Objective: Show a progress bar while Unity loads in the next scene

3 min readOct 10, 2021

Loading screens are commonly used to provide the user feedback that it is processing with a visual representation of how long before the game starts.

The screen is shown above consists of a few UI elements and a single script.

UI

Canvas
Background Image
Loading Bar
Overlay (I actually love this idea)

Script

Load Level

Let's look closer at how each plays its part.

Canvas

The only properties you really need to make sure of is setting the UI Scale Mode to Scale With Screen Size and I set the Reference Resolution to X: 1280 and Y: 720.

Background Image

Simply add a UI Image to the Canvas, rename it to Background and located the main background image, and set the Anchor Presets. I used the SHIFT and ALT to set the anchor to the centre and stretch the image to the full size of the canvas.

Loading Bar

For this feature, add another UI Image and rename it to LoadingBar. Let’s first anchor this to the left of the screen and position it.

Change the Image Type to Filled.

Making sure the Fill Method is Horizontal. Noticed as you play with the Fill Amount the Bar reflects the setting. 0 is empty to 1 which is a full bar.

Overlay

As this stands, I would have moved on due to my lack of artistry but today I learnt how much texture changes the complete feel of this UI.

By adding a texture that overlays the loading bar really made it pop and I was amazed at how effective it is.

Load Level Script

We are now on to the glue that brings it all together.

Firstly there is a variable to references the Loading Bar and I drag the LoadingBar onto the slot in the Load Level scripts component on the Canvas.

In the Start Method, we set the Loading Bar’s Fill Amount to zero and call a coroutine.

This coroutine first loads the Main scene using an Asynchronous Operation.

While the load has not finished (done), we use the progress properties to update the Loading Bar Fill Amount.

We then wait for a frame before exiting the while loop and start the new scene. That’s it!

If you enjoyed reading this article give me a Clap, also if you would like to see more, “Follow” me, so you may be notified of future releases. You may also send me a message if you need any further help.