Component request- ProgressIndicator
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 177
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 48
Description
## Overview
Request to add a `ProgressIndicator` (or `ProgressCircle`) component to the Kumo design system, migrating the current local implementation from Magic Networks.
---
## 1. Usage Context
**Primary Use Case:** Onboarding progress indicator
**Location:** [Magic Networks Overview page (`OverviewMain.tsx:77-113`)
](https://gitlab.cfdata.org/cloudflare/fe/stratus/-/merge_requests/33221/diffs#501a4ed3b86d8039274a52cc0000fd5d237d6fbf)
**Component Hierarchy:**
```
OverviewMain
└── "Get started with Magic Transit" card
└── OverviewProgressLabel component
├── Conditional icon rendering:
│ ├── All completed → CheckCircleIcon (filled)
│ ├── Not started → CircleDashedIcon (empty)
│ └── In progress → ProgressCircleIcon (partial)
└── Text counter: "X / Y" completed steps
```
**Behavior:**
- Progress calculated as `completedCount / totalCount`
- Shows 6 segments that progressively fill based on completion percentage
- Used to track Magic Transit onboarding checklist (IP prefixes, tunnels, etc.)
---
## 2. Screenshots/GIF


---
Contributor guide
Assessment
This issue has not been assessed yet.