Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Progress and activity

    This article needs a technical review. How you can help.

    Draft
    This page is not complete.

    Progress and activity indicators are used to provide visual feedback that a process is active.

    Note: The stylesheet and image resources for standard progress and activity indicators are currently not finalized.

    Characteristics

    • May include an animated visual element, a text label, or both.
    • Progress and activity indicators may be used in modal windows, or inline either with content or adjacent to content.
    • An activity indicator is used to show that an activity is ongoing without indicating how long the task is expected to take; these can be "barberpole" style indicators, or spinners.
    • A progress indicator is used to show how much out of 100% of an activity has been completed.

    Visuals

    There are three kinds of progress and activity indicators: activity bars, progress bars, and spinners.

    Activity bar

    Activity bars are used when an unknown amount of data is being received, or when the duration of the activity being performed cannot be predicted.

    Progress bar

    Progress bars are used when a known amount of data is being received, or when the duration of the task being performed can be predicted.

    When the activity for which a progress bar is being presented is paused, the "uncompleted" part of the bar goes from solid to a "barberpole" striped pattern, so that the user has feedback as to the paused nature of the activity.

    Spinner

    Used when data is being sent.

    You should use a modal progress or activity indicator when the phone can't be used for any other tasks while the activity continues. A non-modal progress indicator animates while the activity is progressing, without preventing the user from performing other tasks.

    Modal progress indicators are displayed on a full-screen view, such as the ones shown below.

    Running progress bar
    Paused progress bar
    Activity bar
    Spinner

    Non-modal progress and activity indicators

    Non-modal activity and progress bars are displayed immediately below the view's header, if there is one. If there's no header, the bar is instead displayed immediately below the system's status bar (with the time, battery level, and so forth). You can also use an inline spinner to indicate progress of a task specific to an item in a list.

    Running progress bar
    Paused progress bar
    Light activity bar
    Dark activity bar

    A darker version of the activity bar is used when the screen background is predominantly a dark color, such as in this photo gallery screenshot.
    Inline spinner

    Here, an inline spinner next to a text message indicates that the message is in the process of being sent.

    		  

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: chrisdavidmills, kscarfone, Sheppy
     Last updated by: chrisdavidmills,