Progress Bar Component

Progress bar is used to visualize the completion of certain tasks. It shows how much if the task has been completed and how much is still left.

Tooltip Variations

Default Default sized progress bar with 8px height. Progress moves from left to right.

10px

Small Shorter bar height, can be used in small spaced containers.

10px

With labels Showing the progress label of the progress % and text label describing what is being loaded.

20px

Guideline

• Only appears when the cursor is hovering over the selected item.
• Should contain a brief read-only text label.
• On default, tooltips are placed on top of the selected item. But when there isn’t enough space in the viewport, it should be placed to the side or below as needed.

When to Use

• To clarify or give more contextual information about the item being displayed.
• To show information in a form of short and brief sentences.
• Provide context for unlabeled icon buttons.

When not to Use

• Not to display the same thing as the hovered item. For example, providing tooltip labelled “confirm” for an action button labelled “confirm”
• Long complex format information.
• Having action button or link.

Code