Progress and Activity Indicators

Indicators visually show that a task is ongoing. If you can determine the amout of time a user will wait for a task, we recommend using a progress indicator. If the wait is for an unspecified amount of time, use an activity indicator.

Usage

Use indicators to show the progress of tasks such as data loading.

Behavior

  • Filling

    A progress indicator gradually fills according to the level of progress made.

  • Spinning

    An activity indicator spins until an activity is completed.

Types

  • Progress indicators

    A progress indicator helps users determine how long they will wait by displaying how far a task has progressed. You can show progress with a percentage scale or a fraction indicator. The indicator disappears when the task is completed.

    Progress Indicator in developer's guides

    Native

    Progress Bar

    Web

    Progress Bar

    • Full progress indicator

      Display a full progress indicator around the edge of the screen.

      A full progress indicator shows progress around the edge of the screen.

    • Small progress indicator

      Display a small progress indicator in the middle of the screen. Provide a description of the progress status below the indicator.

      A small progress indicator shows progress in the middle of the screen.

    • In-list progress indicator

      The progress of an action on a list item can be displayed with an in-list indicator.

      The progress of a list item action is displayed with an in-list progress indicator.

  • Activity indicators

    Activity indicators inform users that a task is ongoing without specifying progress percentage. The indicator disappears when the task is completed.

    Activity Indicator (Full) in developer's guides

    Native

    Progress Bar > process

    Web

    Progressing

    • Full activity indicator

      Display a full activity indicator around the edge of the screen to indicate that an action is ongoing. The indicator keeps spinning around the edge until the action is completed.

      A full activity indicator spins around the edge of the screen to indicate that an action is ongoing.

    • Small activity indicator

      Display a small activity inidcator in the center of the screen to indicate that an action is ongoing. A small circle keeps spinning until the action is completed. A description of the action can be shown below the indicator.

      A small activity indicator spins in the middle of the screen to show that an action is ongoing.

    • In list activity indicator

      Ongoing actions on a list item can be higlighted with an in-list indicator.

      An ongoing list item action is indicated with an activity indicator to the right of the item.