<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function textArea_change(evt:Event):void {
                var ta:TextArea = evt.currentTarget as TextArea;
                progressBar.setProgress(ta.length, ta.maxChars);
            }

            private function progressBar_progress(evt:ProgressEvent):void {
                var pb:ProgressBar = evt.currentTarget as ProgressBar;
                if (pb.percentComplete > 95) {
                    pb.setStyle("themeColor", "red");
                } else if (pb.percentComplete > 80) {
                    pb.setStyle("themeColor", "yellow");
                } else {
                    pb.setStyle("themeColor", "haloGreen");
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel>
        <mx:TextArea id="textArea"
                width="320"
                height="120"
                maxChars="300"
                change="textArea_change(event);" />
        <mx:ControlBar>
            <mx:ProgressBar id="progressBar"
                    mode="manual"
                    minimum="0"
                    maximum="{textArea.maxChars}"
                    label="%1 of %2 characters (%3%%)"
                    labelPlacement="center"
                    width="100%"
                    progress="progressBar_progress(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>