Dot.SYSTEM

Progress

Visual status indicators for long-running processes or metric milestones.

Usage

Use the Progress component to show how much of a task has been completed. It's ideal for file uploads, setup wizards, or tracking goals against a target.

Content

Interactive Preview

Click to simulate progress updates.

Syncing project files...30%

Sizes

Small (4px)
Medium (Default - 8px)
Large (16px)

Spec

  • Track: #E5E5E5 (Neutral light gray).
  • Indicator: Brand Primary (#D74D0F).
  • Animation: Smooth 500ms ease-in-out transition on value changes.
  • Typography: 14px font-medium for labels and percentages.
  • Radius: Full pill radius for track and indicator.

Anatomy

Label
Value
PROGRESS SYSTEM