<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Image skin progress bar preloader.  

@see spark.components.Image

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4.5
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="9" minWidth="36">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.supportClasses.Range")]
        ]]>
    </fx:Metadata>
      
    <!-- Track layer: inner border -->
    <s:Rect left="1" right="1" top="1" bottom="1" >
        <s:stroke>
            <s:SolidColorStroke color="0x636363" alpha="1" />
        </s:stroke>
    </s:Rect>
    
    <!-- Track layer: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x9A9A9A" 
                                 alpha="1" />
                <s:GradientEntry color="0xBDBDBD" 
                                 alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- Track layer: inner shadow -->
    <s:Rect left="2" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect right="2" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect left="3" top="2" right="3" height="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- Progress bar -->
    <s:Group percentWidth="{hostComponent.value}" height="100%">
        <!-- layer 1: fill -->
        <s:Rect left="2" right="2" top="2" bottom="2" >
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" 
                                     alpha="1" />
                    <s:GradientEntry color="0xD8D8D8" 
                                     alpha="1" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        
        <!-- layer 2: border -->
        <s:Rect left="2" right="2" top="2" bottom="2" >
            <s:stroke>
                <s:LinearGradientStroke rotation="90">
                    <s:GradientEntry color="0xFFFFFF" 
                                     alpha=".9" />
                    <s:GradientEntry color="0xFFFFFF" 
                                     alpha="0.5" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>
        
        <!-- layer 3: right edge -->
        <s:Rect right="1" top="2" bottom="2" width="1" >
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.35" />
            </s:fill>
        </s:Rect>
    </s:Group>
</s:Skin>