How do I make a progress bar?

How do I make a progress bar using GUITextures that gets shorter when a variable decreases using JavaScript?

Here's some code for a simple working progress bar display. In this example, the 'progress' value is taken directly from the time, but you should set it to a value between zero and one from whatever source you want to display the progress of.

var progress : float = 0;
var pos : Vector2 = new Vector2(20,40);
var size : Vector2 = new Vector2(60,20);
var progressBarEmpty : Texture2D;
var progressBarFull : Texture2D;

function OnGUI()
    GUI.DrawTexture(Rect(pos.x, pos.y, size.x, size.y), progressBarEmpty);
    GUI.DrawTexture(Rect(pos.x, pos.y, size.x * Mathf.Clamp01(progress), size.y), progressBarFull);

function Update()
    progress = Time.time * 0.05;

The use of 'Clamp01' limits the bar's width to prevent it from growing longer than the specified size. It's worth noting that the 'full' texture stretches as it expands, rather than revealing its image which would be more desirable.

I have played with the "ScaleMode" parameter to try and overcome this, and the closest I can get is to use the following modification to the second DrawTexture call:

   GUI.DrawTexture(Rect(pos.x, pos.y, size.x * Mathf.Clamp01(progress), size.y), progressBarFull, ScaleMode.ScaleAndCrop, false, size.x/size.y);

However unfortunately the cropping effect is centred rather than flush left, so it still looks a bit odd!

try this:

   var customStyle: GUIStyle;
   private var progress : int;
   var mySpeed: int;
   var pos : Vector2;
   var size : Vector2; 

   function OnGUI () {
        // Constrain all drawing to be within a pixel area .
        GUI.BeginGroup (new Rect (pos.x, pos.y, progress, size.y));

        // Define progress bar texture within customStyle under Normal > Background
        GUI.Box (Rect (0,0, size.x, size.y),"", customStyle);

        // Always match BeginGroup calls with an EndGroup call
        GUI.EndGroup ();

    function Update (){
        progress = size.x - Mathf.Floor(Time.time * mySpeed);


I haven't actually implemented this in Unity, but typically what you do is to set the width of your draw Rect to a product of your variable. Example, if the variable is 0 to 1, and you want a progress bar 20 x 200 pixels:

Rect(0, 0, 20, myVar * 200)

What I did is to use a slider, and use skins to make it look like a progress bar.

I have found the following link to be very helpful for Unity 4.6 or higher version users.!/content/30891

Hope it helps!

If you want to have much more control of the appearance draw simple quads:

public class ProgressDraw : MonoBehaviour
    private UnityEngine.Material ColorMaterial = null;

    private void CreateColorMaterial()
        if (!ColorMaterial)
             /* from:
               * But materials creating from shader code arguments is no longer supported.
                ColorMaterial = new UnityEngine.Material("Shader \"Lines/Colored Blended\" {" +
                    "SubShader { Pass { " +
                    "    Blend SrcAlpha OneMinusSrcAlpha " +
                    "    ZWrite Off Cull Off Fog { Mode Off } " +
                    "    BindChannels {" +
                    "      Bind \"vertex\", vertex Bind \"color\", color }" +
                    "} } }");
              ColorMaterial = (UnityEngine.Material)Resources.Load("UnlitColorMaterial");
              ColorMaterial.hideFlags = HideFlags.HideAndDontSave;
              ColorMaterial.shader.hideFlags = HideFlags.HideAndDontSave;
    public override void OnGUI()
        Vector2 pos = new Vector2(20, Screen.height-40);
        Vector2 size = new Vector2(Screen.width-40, 30);
        float EdgeThickness = 3.0f;




        GL.Color(new Color(0.4f, 0.4f, 0.4f));
        GL.Vertex3(pos.x,           pos.y + size.y, 0);
        GL.Vertex3(pos.x + size.x,  pos.y + size.y, 0);
        GL.Color(new Color(0.1f, 0.1f, 0.1f));
        GL.Vertex3(pos.x + size.x,  pos.y + size.y*0.5f, 0);
        GL.Vertex3(pos.x,           pos.y + size.y*0.5f, 0);

        GL.Color(new Color(0.4f, 0.4f, 0.4f));
        GL.Vertex3(pos.x,           pos.y,          0);
        GL.Vertex3(pos.x + size.x,  pos.y,          0);
        GL.Color(new Color(0.1f, 0.1f, 0.1f));
        GL.Vertex3(pos.x + size.x,  pos.y + size.y * 0.5f, 0);
        GL.Vertex3(pos.x,           pos.y + size.y * 0.5f, 0);

        float OverN = 1.0f / ((float)Math.Max(1, NumberToLoad));
        float progress = (NumbersComplete)* OverN;

        GL.Color(new Color(0.4f, 0.6f, 1.0f));
        Vector2 inpos = new Vector2(pos.x + EdgeThickness, pos.y + EdgeThickness);
        Vector2 insize = new Vector2(size.x - 2*EdgeThickness, size.y - 2*EdgeThickness);

        GL.Vertex3(inpos.x,                         inpos.y, 0);
        GL.Vertex3(inpos.x + insize.x * progress,   inpos.y, 0);
        GL.Vertex3(inpos.x + insize.x * progress,   inpos.y + insize.y, 0);
        GL.Vertex3(inpos.x,                         inpos.y + insize.y, 0);