Components

ProgressCircle

A circular indicator that represents the completion status of a task or process, with optional label and indeterminate state.

Component

View code

Show playground

27%

Props

Props	Default	Type
`progress`	`50`	`number`
`color`	`ColorAccent.PRIMARY_BRAND`	`ColorAccent`
`size`	`ProgressCircleSize.MD`	`ProgressCircleSize`
`isRounded`	`true`	`boolean`
`showProgressLabel`	`false`	`boolean`
`progressLabelPosition`	`ProgressCircleLabelPosition.CENTER`	`ProgressCircleLabelPosition`
`min`	`0`	`number`
`max`	`100`	`number`
`isIndeterminate`	`false`	`boolean`
`loadingText`	`'Loading...'`	`string`
`ariaLabel`	`'Progress'`	`string`

Slots

Name	Description
`default`	Replaces the content shown at the center of the ring. Receives the current percentage as the `progress` slot prop. Takes precedence over the built-in center label.

 <template>
    <ProgressCircle :progress="100" color="success">
        <template #default>
            <Icon name="mdi:check" />
        </template>
    </ProgressCircle>
</template>

Usage

progress

Sets the current progress. It is clamped between min and max.

 <template>
    <ProgressCircle :progress="75" />
</template>

Type: number
Default: 50

color

Sets the accent color of the indicator and its track.

 <template>
    <ProgressCircle :color="ColorAccent.SUCCESS" />
</template>

Type: ColorAccent
Default: ColorAccent.PRIMARY_BRAND

size

Sets the diameter and thickness of the ring (XS to XXL).

 <template>
    <ProgressCircle :size="ProgressCircleSize.XL" />
</template>

Type: ProgressCircleSize
Default: ProgressCircleSize.MD

isRounded

Rounds the ends of the indicator arc.

 <template>
    <ProgressCircle :isRounded="false" />
</template>

Type: boolean
Default: true

showProgressLabel

Shows the progress percentage, or the loading text when indeterminate.

 <template>
    <ProgressCircle showProgressLabel />
</template>

Type: boolean
Default: false

progressLabelPosition

Sets where the label is shown: inside the ring (CENTER) or above or below it. The center label is not shown while indeterminate because the loading text does not fit inside the ring.

 <template>
    <ProgressCircle showProgressLabel :progressLabelPosition="ProgressCircleLabelPosition.BOTTOM" />
</template>

Type: ProgressCircleLabelPosition
Default: ProgressCircleLabelPosition.CENTER

min

Sets the minimum value of the range.

 <template>
    <ProgressCircle :min="10" />
</template>

Type: number
Default: 0

max

Sets the maximum value of the range.

 <template>
    <ProgressCircle :max="250" />
</template>

Type: number
Default: 100

isIndeterminate

Shows a spinning arc for tasks without a known duration.

 <template>
    <ProgressCircle isIndeterminate />
</template>

Type: boolean
Default: false

loadingText

Sets the text announced to screen readers (and shown as label when enabled) while indeterminate.

 <template>
    <ProgressCircle isIndeterminate loadingText="Please wait..." />
</template>

Type: string
Default: 'Loading...'

ariaLabel

Sets the aria-label attribute for screen readers.

 <template>
    <ProgressCircle ariaLabel="Upload progress" :progress="45" />
</template>

Type: string
Default: 'Progress'

Accessibility

The ring uses role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax. While indeterminate, aria-valuenow is omitted and aria-valuetext carries the loading text. Set ariaLabel to describe what is progressing.