Progress Circle

A circular SVG progress indicator for determinate upload or processing progress.

Preview

Usage

Use a progress circle to communicate deterministic progress to the user — for example, a file upload or media processing operation that reports a percentage complete.

Do

Use when you have a concrete progress value (0–100) to display
Always provide a meaningful aria-label describing the operation
Show the progress indicator only while an operation is active; remove it once complete

Don’t

Don't use for indeterminate loading states — use Loader instead
Don't omit the aria-label; it is required for screen reader accessibility

Demo

Variants

Progress

 
<dt-progress-circle :progress="{value}" aria-label="{value} complete" />

Sizes

The size prop controls the diameter of the progress circle, aligning to Dialtone icon sizes.

 
<dt-progress-circle size="{size}" :progress="66" aria-label="value" />

Kinds

The kind prop sets the color variant of the progress circle.

 
<dt-progress-circle kind="{kind}" :progress="66" aria-label="value" />

Vue API

Props

Name	Description	Default
ariaLabel required	Accessible label read by screen readers. Type: string
kind	The color variant of the progress indicator. Type: string Values: defaultbrandcriticalpositivewarninginfoai	'default'
progress	Current progress value (0–100). Type: number	0
size	The size of the progress indicator, aligning to Dialtone icon sizes. Type: string Values: 100200300400500600700800	'500'

Classes

Class	Applies to	Description

Accessibility

The root element has role="progressbar" with aria-valuemin="0", aria-valuemax="100", and :aria-valuenow bound to the current progress value.
Always provide an aria-label that describes the ongoing operation (e.g., "Uploading photo").
The element has tabindex="-1" so it is not in the natural tab order, but can receive programmatic focus if needed.

Preview

Usage #

Do

Don’t

Demo #

Variants #

Progress #

Sizes #

Kinds #

Vue API #