COMPONENTS

Progress

Progress indicators provide feedback to the user regarding the percentage of completion of a task, workflow or system.

progress-intro.png
progress-anatomy.png
  1. Process Label
  2. Completion Indicator
  3. Track
  4. Completion Label

Progress has two available shapes — bar or a circle, with bar being the default shape.

Progress shape

Progress can be used with or without labels. There are two optional labels available, one to describe process and one to display a completion value.

Progress labels

Status can be displayed to the user through color. All progress indicators must have a status assigned. Most progress indicators should be set to have status set to "information". If a status is not set, then the status will be set to none by default.

progress-status.png

Progress indicators can be displayed in large, medium or small sizes.

Progress Size

User progress can be shown over the course of minutes, hours or days and may persist on the page.

progress-user-activity.png

System progress is typically a temporary animated display showing a short term application process.

progress-system-activity.png

Custom inner labels can be added to the progress bar.

progress-status-trades.png

Trade progress is specific to trade activity and is often embedded within a Data Grid.

progress-trade-activity.png
  • Use labels to indicate to the user what process is being tracked.
  • Position Progress indicators in the center of a screen for general functions.
  • For discrete tasks within a screen, position a Progress indicator adjacent to that task.
  • Do not use Progress indicators for complex tasks with distinct milestones, instead use Steps.