UI Kits
Dashboards

Progress Panel

Progress metrics with horizontal bars.

Add to UI Builder
Usage guidance

When to use it.

Prioritize the most decision-relevant information and avoid unnecessary metric overload.

Accessibility

Implementation notes.

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.
Release QA

Implementation checklist.

0/3
Handoff notes

Implementation notes for this component.

Quick section export
<section class="ap-progress-panel"><div><span>Profile completion</span><strong>86%</strong><i><b style="width:86%"></b></i></div><div><span>Monthly goal</span><strong>64%</strong><i><b style="width:64%"></b></i></div><div><span>Tasks complete</span><strong>92%</strong><i><b style="width:92%"></b></i></div></section>
Related components

More in Dashboards