Flex - ProgressBar Control



The ProgressBar control provides users a visual representation of the progress of a task over time.

Class declaration

Following is the declaration for mx.controls.ProgressBar class:

public class ProgressBar 
   extends UIComponent 
      implements IFontContextComponent

Public properties

S.N.Property & Description
1alignToolTip : String = "Align"
The ToolTip that appears when the user hovers over the text alignment buttons.
2conversion : Number
Number used to convert incoming current bytes loaded value and the total bytes loaded values.
3direction : String
Direction in which the fill of the ProgressBar expands toward completion.
4indeterminate : Boolean
Whether the ProgressBar control has a determinate or indeterminate appearance.
5label : String
Text that accompanies the progress bar.
6labelPlacement : String
7maximum : Number
Largest progress value for the ProgressBar.
8minimum : Number
Smallest progress value for the ProgressBar.
9mode : String
Specifies the method used to update the bar.
10percentComplete : Number
[read-only] Percentage of process that is completed.The range is 0 to 100.
11source : Object
Refers to the control that the ProgressBar is measuring the progress of.
12value : Number
[read-only] Read-only property that contains the amount of progress that has been made - between the minimum and maximum values.

Public methods

S.N.Method & Description
2setProgress(value:Number, total:Number):void
Sets the state of the bar to reflect the amount of progress made when using manual mode.


S.N.Event & Description
Dispatched when the load completes.
Dispatched when an object's state changes from visible to invisible.
Dispatched as content loads in event or polled mode.
Dispatched when the component becomes visible.

Methods inherited

This class inherits methods from the following classes:

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex ProgressBar Control Example

Let us follow the following steps to check usage of ProgressBar control in a Flex application by creating a test application:

1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   width="100%" height="100%" minWidth="500" minHeight="500"
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>	
         private var increment:uint=10;

         private function runProgressBar():void
            if(increment <= 100)
               progressBar.label= "Current Progress" + " " + increment + "%";
            if(increment > 100)
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
            <s:Panel id="progressBarPanel" title="Using ProgressBar" 
               width="500" height="300">
                  <s:VerticalLayout  gap="10" verticalAlign="middle" 
               <s:Label color="0x323232"
                  text="Click the button to start the progress bar." />
               <s:Button id="btnStart" label="Start" 
                  click="runProgressBar();" />
               <mx:ProgressBar id="progressBar" 
                  labelPlacement="bottom" minimum="0" 
                  visible="true" maximum="100"
                  color="0x323232" label="CurrentProgress 0%" 
                  direction="right" mode="manual" width="90%"/>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex ProgressBar Control