Feedback/DSCircularProgress
DSCircularProgress
feedbackCircular ring with animated fill showing progress percentage.
iOSmacOS
Purpose
Use to display progress, completion rates, or metric percentages in a compact circular format.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| progressreq | Double | — | Progress value from 0.0 to 1.0 |
| size | CGFloat | 80 | Diameter of the circle |
| lineWidth | CGFloat | 8 | Thickness of the ring |
| color | Color | DSColor.primary | Ring color |
| showPercentage | Bool | true | Show percentage text in center |
| accessibilityLabel | String? | nil | Optional accessibility label |
Examples
Task completion
Show task completion percentage.
swift
DSCircularProgress(
progress: tasksCompleted / totalTasks,
size: 100,
lineWidth: 10,
color: DSColor.success
)Storage usage
Display storage usage with custom color.
swift
let usage = usedStorage / totalStorage
DSCircularProgress(
progress: usage,
color: usage > 0.9 ? DSColor.error : DSColor.primary,
showPercentage: true
)Usage Guidelines
- Use for single metric visualization (0-100%)
- Choose colors that match the metric meaning (red for high usage, green for completion)
- Keep size between 60-120pt for readability
- Show percentage text for clarity
When to Use
✓ Use DSCircularProgress for:
- • Single metric visualization (completion rate, storage usage)
- • Compact progress indicators in cards or widgets
- • Goal tracking and achievement displays
- • Profile completion or skill level indicators
✗ Avoid using for:
- • Multiple progress values (use DSProgressBar or chart)
- • Linear progress (use DSProgressBar)
- • Indeterminate loading (use DSSpinner)
- • Very small sizes under 40pt (hard to read)
Consider instead:
DSProgressBar
For linear progress or multiple values
DSSpinner
For indeterminate loading states
DSMetricCard
For metrics with more context and labels
Accessibility
VoiceOver
Announces progress with natural language (e.g., '75 percent complete' or 'Upload, 75 percent complete' with label)
Keyboard
- • Not interactive - display only
Dynamic Type
✓ Supported
Contrast
Colors follow design best practices for visibility
Traits
.updatesFrequently for live progress updatesPercentage value announcedOptional label for context