Setting a Flex ProgressBar control’s text indent – mx:ProgressBar

The following example shows how you can control the amount of text indenting on a progress bar label.

<?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[
	private function progressBar_creationComplete():void
	{
		progressBar.setStyle("labelWidth", progressBar.width);
		progressBar.setProgress(35, 100);
	}

	private function comboBox_change():void
	{
		progressBar.labelPlacement = comboBox.selectedItem.toString();
	}

	private function slider_change():void
	{
		progressBar.setStyle("textIndent", slider.value);
	}
]]>
</mx:Script>

<mx:ApplicationControlBar dock="true">
	<mx:Label text="textIndent:" />
	<mx:HSlider id="slider"
		minimum="0"
		maximum="60"
		liveDragging="true"
		showTrackHighlight="true"
		dataTipPrecision="0"
		snapInterval="1"
		tickInterval="10"
		labels="[0,20,40,60]"
		change="slider_change();" />
	<mx:Spacer width="50" />
	<mx:Label text="labelPlacement:" />
	<mx:ComboBox id="comboBox"
		selectedIndex="4"
		change="comboBox_change();">
		<mx:dataProvider>
			<mx:Array>
				<mx:String>left</mx:String>
				<mx:String>center</mx:String>
				<mx:String>right</mx:String>
				<mx:String>top</mx:String>
				<mx:String>bottom</mx:String>
			</mx:Array>
		</mx:dataProvider>
	</mx:ComboBox>
</mx:ApplicationControlBar>

<mx:ProgressBar id="progressBar"
	mode="manual"
	label="%1 of %2 (%3%%)"
	creationComplete="progressBar_creationComplete();" />

</mx:Application>