The ProgressBar control shows a visual progress of a task over time. There are two types of ProgressBar controls: Determinate and Indeterminate.

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.
You can create a progress bar by:

If progress bar mode is manually You can set progress bar value manually but The ProgressBar control shows a visual progress of a task over time. There are two types of ProgressBar controls: Determinate and Indeterminate.

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.

ProgressBar control modes

You use the mode property to specify the operating mode of the ProgressBar control. The ProgressBar control supports the following modes of operation:

event : You generally use a determinate ProgressBar in this mode. The ProgressBar control only updates if the value of the source property extends the EventDispatcher class. This is the default mode.

You also use this mode if you reload an image and Image controls to load multiple images.

polled: Use the source property to specify a loading process that exposes the bytesLoaded and bytesTotal properties. You generally use a determinate ProgressBar in this mode.

manual : Set the maximum, minimum, and indeterminate properties along with calls to the setProgress() method. generally use an indeterminate ProgressBar in this mode.

You can create a progress bar by:
<mx:ProgressBar width="200" mode="polled"/>

Here you can get complete syntax of progressbar control.

<mx:ProgressBar
    Properties
    conversion="1"
    direction="right|left"
    indeterminate="false|true"
    label="No default"
    labelPlacement="bottom|top|left|right|center"
    maximum="0"
    minimum="0"
    mode="event|polled|manual"
    source="No default"
  
    Styles
    barColor="undefined"
    barSkin="ProgressBarSkin"
    borderColor="0xAAB3B3"
    color="0x0B333C"
    disabledColor="0xAAB3B3"
    fontAntiAliasType="advanced"
    fontFamily="Verdana"
    fontGridFitType="pixel"
    fontSharpness="0"
    fontSize="10"
    fontThickness="0"
    fontStyle="normal|italic"
    fontWeight="normal|bold"
    horizontalGap="8"
    indeterminateMoveInterval="26"
    indeterminateSkin="ProgressIndeterminateSkin"
    labelWidth="Computed"
    leading="0"
    maskSkin="ProgressMaskSkin"
    paddingLeft="0"
    paddingRight="0"
    textAlign="left|right|center"
    textDecoration="none|underline"
    textIndent="0"
    themeColor="haloGreen|haloBlue|haloOrange"
    trackColors="[0xE6EEEE,0xE6EEEE]"
    trackHeight="Calculated"
    trackSkin="ProgressTrackSkin"
    verticalGap="6"
  
    Events
    complete="No default"
    hide="No default"
    progress="No default"
    show="No default"
  
    Effects
    completeEffect="No default"
  />

If progress bar mode is manual then you can set progress bar value by setProgress method. Here is the syntax:
setProgress(Number completed, Number total)

By default, the ProgressBar displays the label LOADING xx%, where xx is the percent of the image loaded. You use the label property to specify a different text string to display.

The label property lets you include the following special characters in the label text string:

%1 Corresponds to the current number of bytes loaded.
%2 Corresponds to the total number of bytes.
%3 Corresponds to the percent loaded.
%% Corresponds to the % sign.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, progressBar.maximum);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Set Progress bar by moving slider:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        change="slider_change(event);"
                        width="{progressBar.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar" mode="manual" minimum="0"maximum="360" />

</mx:Application>

Soon I will post some more flex progress bar code example.