Progress Circle

New
Storybook Source

Circular indicator for upload or processing progress.

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

Sizes

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

Kinds

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

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.

Vue API 

import { DtProgressCircle } from '@dialpad/dialtone-vue';

Props

Name
Default
Type
ariaLabel required
string

Accessible label read by screen readers.

kind
'default'
"default" | "brand" | "critical" | "positive" | "warning" | "info" | "ai"

The color variant of the progress indicator.

progress
0
number

Current progress value (0–100).

size
500
"100" | "200" | "300" | "400" | "500" | "600" | "700" | "800"

The size of the progress indicator, aligning to Dialtone icon sizes.

Classes

Class
Applies to
Description

Progress Circle documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope