Unity 3D Radial/ Circular Progress Bar Tutorial

In this tutorial, I will be showing how to make a circular/radial progress bar (could also be used as an HP bar, etc.) in Unity 3D.

So let’s begin!

Steps

We will need a circular image with a transparent background. (You can download one from here)

• Import the image into your project and change its Texture Type to “Sprite (2D and UI)”

• Create new Canvas (GameObject -> UI -> Canvas)
• Right click on Canvas object -> UI -> Image
• Assign a circle sprite to Source Image and change its color to red
• Change the Image Type to “Filled” and Fill Method to “Radial 360” (This will show another variable called Fill Amount which controls how much of the image is visible along the circle)

• Duplicate the image, change its color to white and Image Type to “Simple”
• Move the duplicated Image inside the first Image
• Change the first image size (the one with Filled Image type) to something bigger (ex. width: 135 height: 135)

• Create new Text (Right Click on Canvas -> UI -> Text)
• Change its alignment to middle center

• Also, change the text height to 60 to be able to fit the loading text

Lastly, we will create a script that will apply the progress value to the Image

• Create a new script, call it “SC_CircularLoading” and paste the code below inside it:

SC_CircularLoading.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SC_CircularLoading : MonoBehaviour
{
    public Image loadingImage;
    public Text loadingText;
    [Range(0, 1)]
    public float loadingProgress = 0;

    // Update is called once per frame
    void Update()
    {
        loadingImage.fillAmount = loadingProgress;
        if(loadingProgress < 1)
        {
            loadingText.text = Mathf.RoundToInt(loadingProgress * 100) + "%\nLoading...";
        }
        else
        {
            loadingText.text = "Done.";
        }
    }
}

• Attach SC_CircularLoading script to any object and assign its variables (Loading Image should be the image with Radial Fill type and Loading Text should be a text that will show the progress value)

• Finally, press Play and move the Loading Progress slider. Observe the loading image gradually fill: