Components

ProgressBar

A visual indicator that represents the completion status of a task or process, typically displayed as a horizontal bar that fills up as progress is made.

Component

View code

Show playground

Props

Props	Default	Type
`progress`	`50`	`number`
`color`	`ColorAccent.PRIMARY_BRAND`	`ColorAccent`
`size`	`ProgressBarSize.SM`	`ProgressBarSize`
`isRounded`	`true`	`boolean`
`showProgressLabel`	`false`	`boolean`
`progressLabelPosition`	`Position.TOP`	`Position`
`progressLabelAlignment`	`Align.CENTER`	`Align`
`min`	`0`	`number`
`max`	`100`	`number`
`isIndeterminate`	`false`	`boolean`
`loadingText`	`'Loading...'`	`string`
`progressClass`	—	`string`
`progressLabelClass`	—	`string`
`ariaLabel`	`'Progress'`	`string`

Usage

progress

Sets the current progress value of the progress bar.

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

Type: number
Default: 50

color

Sets the color of the progress bar. Uses the ColorAccent enum.

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

Type: ColorAccent
Default: ColorAccent.PRIMARY_BRAND

Options

Value	Description
`NEUTRAL`	Neutral
`SUCCESS`	Success
`WARNING`	Warning
`DANGER`	Danger
`INFO`	Info
`PRIMARY_BRAND`	Primary Brand
`SECONDARY_BRAND`	Secondary Brand

size

Sets the size of the progress bar. Uses the ProgressBarSize enum.

 <template>
    <ProgressBar :size="ProgressBarSize.LG" />
</template>

Type: ProgressBarSize
Default: ProgressBarSize.SM

Options

Value	Description
`XS`	Extra Small
`SM`	Small
`MD`	Medium
`LG`	Large
`XL`	Extra Large

isRounded

If true, applies rounded corners to the progress bar.

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

Type: boolean
Default: true

showProgressLabel

If true, displays the progress label.

 <template>
    <ProgressBar :showProgressLabel="true" />
</template>

Type: boolean
Default: false

progressLabelPosition

Sets the position of the progress label. Uses the Position enum.

 <template>
    <ProgressBar :progressLabelPosition="Position.BOTTOM" />
</template>

Type: Position
Default: Position.TOP

Options

Value	Description
`TOP`	Position the label above the progress bar.
`BOTTOM`	Position the label below the progress bar.

progressLabelAlignment

Sets the horizontal alignment of the progress label. Uses the Align enum.

 <template>
    <ProgressBar :progressLabelAlignment="Align.RIGHT" />
</template>

Type: Align
Default: Align.CENTER

Options

Value	Description
`LEFT`	Align the label to the left.
`CENTER`	Center the label.
`RIGHT`	Align the label to the right.

min

Sets the minimum value of the progress bar.

 <template>
    <ProgressBar :min="0" />
</template>

Type: number
Default: 0

max

Sets the maximum value of the progress bar.

 <template>
    <ProgressBar :max="100" />
</template>

Type: number
Default: 100

isIndeterminate

If true, the progress bar will display an indeterminate loading state.

 <template>
    <ProgressBar :isIndeterminate="true" />
</template>

Type: boolean
Default: false

loadingText

Sets the text to display when the progress bar is in an indeterminate state.

 <template>
    <ProgressBar :isIndeterminate="true" loadingText="Please wait..." />
</template>

Type: string
Default: 'Loading...'

progressClass

Allows you to add custom classes to the progress bar element.

 <template>
    <ProgressBar progressClass="bg-gradient-to-r from-green-400 to-blue-500" />
</template>

Type: string

progressLabelClass

Allows you to add custom classes to the progress label element.

 <template>
    <ProgressBar progressLabelClass="font-bold text-lg" />
</template>

Type: string

ariaLabel

Sets the aria-label attribute on the progress bar for screen readers.

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

Type: string
Default: 'Progress'