LoadingCanvas.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
		   horizontalAlign="center" verticalAlign="middle" backgroundColor="green" >
	
	<mx:Script>
		<![CDATA[
			import mx.controls.ProgressBar;
			import mx.core.Application;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			public var progressBarWidth:Number = 210;
			public var progressBarHeight:Number = 20;
			
			private var shutterCanvas:ShutterCanvas = new ShutterCanvas();
			private var progressBar:ProgressBar = new ProgressBar();
			
			private var _isLoading:Boolean = false;
			
			[Bindable("isLoadingChange")]
			public function get isLoading():Boolean
			{
				return _isLoading;
			}
			
			public function set isLoading(value:Boolean):void
			{
 				this._isLoading = value;
				if(value)
				{
					shutterCanvas.x = x;
					shutterCanvas.y = y;
					shutterCanvas.height = height;
					shutterCanvas.width = width;
					shutterCanvas.alpha = 0.5;
					PopUpManager.addPopUp(shutterCanvas, this);
					progressBar.x = x + (width - progressBarWidth)/2;
					progressBar.y = y+ (height - progressBarHeight)/2;
					progressBar.labelPlacement = "center";
					progressBar.mode = "event";
					progressBar.indeterminate = true;
					progressBar.width = progressBarWidth;
					progressBar.setStyle("trackHeight", progressBarHeight);
					PopUpManager.addPopUp(progressBar, this);
				}
				else
				{
					if(progressBar.parent)
					{
						PopUpManager.removePopUp(progressBar);
					}
					if(shutterCanvas.parent)
					{
						PopUpManager.removePopUp(shutterCanvas);
					}
					
				}
				dispatchEvent(new Event("isLoadingChange"));
			}

		]]>
	</mx:Script>
</mx:VBox>
 

ShutterCanvas.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
		 verticalAlign="middle" horizontalAlign="center"
		 backgroundColor="white">
	
</mx:VBox>