Feedback/DSCircularProgress

DSCircularProgress

feedback

since 0.1.0

Circular ring with animated fill showing progress percentage.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

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
valuereq	Double	—	Current progress, relative to total.
total	Double	1.0	Value that represents 100%.
size	CGFloat	64	Diameter of the circle.
lineWidth	CGFloat	6	Thickness of the ring.
color	Color	DSColor.primary	Ring color.
label	String?	nil	Text in the center. nil shows the percentage.

Examples

Task completion

Completed tasks out of the total.

swift

DSCircularProgress(
    value: Double(tasksCompleted),
    total: Double(totalTasks),
    size: 100,
    lineWidth: 10,
    color: DSColor.success
)

Storage usage

Color reacts to the value; custom center label.

swift

let usage = usedStorage / totalStorage

DSCircularProgress(
    value: usage,
    color: usage > 0.9 ? DSColor.error : DSColor.primary,
    label: "\(Int(usedStorage)) GB"
)

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