Feedback/DSCircularProgress

DSCircularProgress

feedback

since 1.2.0

Circular ring with animated fill showing progress percentage.

iOSmacOS

Purpose

Use to display progress, completion rates, or metric percentages in a compact circular format.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

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