478
edits
Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
→Progress & Activity Indicators
(→Lists) |
|||
| Line 256: | Line 256: | ||
'''Used for:''' | '''Used for:''' | ||
* Providing user with visual feedback that a process is active. | |||
'''Characteristics:''' | '''Characteristics:''' | ||
* May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it. | |||
'''Modal:''' They're used when the phone cannot be interrupted while loading data. | * '''Modal:''' They're used when the phone cannot be interrupted while loading data. | ||
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. | ** '''Activity Bar:''' Used when an unknown amount of data is being downloaded. | ||
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place. | ** '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place. | ||
* '''Spinner:''' Used when data is being sent. | ** '''Spinner:''' Used when data is being sent. | ||
'''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active. | |||
* '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones. | |||
* '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place. | * '''Non-Modal:''' Displays a looping animation, communicating to the user that the process is active. | ||
* '''Inline Spinner:''' Used when data is being sent. | ** '''Activity Bar:''' Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones. | ||
** '''Progress Bar:''' Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place. | |||
** '''Inline Spinner:''' Used when data is being sent. | |||
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github] | * [https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/progress_activity/index.html Link to CSS in Github] | ||
* [https:// | * [https://mozilla.box.com/shared/static/u5gr2mzdybq6lvgc0dwv.zip Source PSD (.zip)] | ||
{| | {| | ||