Select to view content in your preferred language

using CSS3 to create progress bar in Flex

1753
3
Jump to solution
12-03-2012 06:17 PM
XintaoLiu
Deactivated User
Is it possible to create a GMail like progress bar (see attached picture) in Flex? Thanks!

[ATTACH=CONFIG]19693[/ATTACH]
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
IvanBespalov
Frequent Contributor
For ms.controls.ProgressBar you can change it's interface by customizing skins [ATTACH=CONFIG]19740[/ATTACH] (copy skins to your app and customize them)
<mx:ProgressBar id="progressBar1"          barSkin="your.company.assets.skins.MyProgressBarSkin"         ...

or change it's interface by customizing css styles
<fx:Style>     @namespace s "library://ns.adobe.com/flex/spark";     @namespace mx "library://ns.adobe.com/flex/mx";        .progressBarSyle     {         /* TODO: define style here */     }     </fx:Style> ... <mx:ProgressBar id="progressBar2"      styleName="progressBarSyle"


Good luck

View solution in original post

0 Kudos
3 Replies
RhettZufelt
MVP Notable Contributor
Not sure what is different about a "Gmail" style, but have you looked here:

http://forums.arcgis.com/threads/57341-how-to-implement-a-quot-Loading-quot-message-after-a-layer-is...
0 Kudos
XintaoLiu
Deactivated User
Not sure what is different about a "Gmail" style, but have you looked here:

http://forums.arcgis.com/threads/57341-how-to-implement-a-quot-Loading-quot-message-after-a-layer-is...


Thanks! But how to change the style, e.g. color, of the indetermined progressbar? Thank you again!
0 Kudos
IvanBespalov
Frequent Contributor
For ms.controls.ProgressBar you can change it's interface by customizing skins [ATTACH=CONFIG]19740[/ATTACH] (copy skins to your app and customize them)
<mx:ProgressBar id="progressBar1"          barSkin="your.company.assets.skins.MyProgressBarSkin"         ...

or change it's interface by customizing css styles
<fx:Style>     @namespace s "library://ns.adobe.com/flex/spark";     @namespace mx "library://ns.adobe.com/flex/mx";        .progressBarSyle     {         /* TODO: define style here */     }     </fx:Style> ... <mx:ProgressBar id="progressBar2"      styleName="progressBarSyle"


Good luck
0 Kudos