Flex progress bar while loading the xml data using URLLoader

Show progress bar in flex while loading the xml data using URLLoader class.

For progress bar display, have a separate MXML component called LoadingBar

MXML Main Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:net="flash.net.*" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import flash.geom.Point;
import mx.containers.HBox;
import mx.controls.Spacer;
import mx.containers.*;
import mx.controls.*;
public var loadingBar:LoadingBar;

public function init():void{
loadingBar=LoadingBar(PopUpManager.createPopUp( this, LoadingBar , true));
loadingBar.progressBar.source = urlLoader;
PopUpManager.centerPopUp(loadingBar);
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

urlLoader.load(new URLRequest("http://localhostdatasource"));
}

private function xmlLoaded(event:Event):void {

PopUpManager.removePopUp(loadingBar);

}
]]>
</mx:Script>

<net:URLLoader id="urlLoader" />

</mx:Application>

MXML Loading Bar component code

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Progress"
width="300" height="100" borderThicknessLeft="1" styleName="loadingStyle"
borderThicknessRight="1" borderThicknessBottom="1" borderThicknessTop="1" >

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:ProgressBar id="progressBar" label="Loading Data..." mode="event" labelPlacement="center" />
</mx:VBox>

</mx:TitleWindow>

The Flex Project looks like below image.