nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

using CSS3 to create progress bar in Flex

XintaoLiu

Is it possible to create a GMail like progress bar (see attached picture) in Flex? Thanks!

[ATTACH=CONFIG]19693[/ATTACH]

gmprogress.png

Find more posts tagged with

Accepted answers

IvanBespalov

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

skins.png

All comments

IvanBespalov

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

skins.png

XintaoLiu

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-checked-in-the-TOC?highlight=progress+bar

Thanks! But how to change the style, e.g. color, of the indetermined progressbar? Thank you again!

rzufelt

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-checked-in-the-TOC?highlight=progress+bar

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

All Communities
Recent Posts
Followed Content
Community Help

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.