Progress Bar | astryx-vue

ProgressBar Props

Name	Type	Default	Description
`value`	`number`	—	Required. Current value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track height.
`variant`	`'neutral' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'neutral'`	Fill color.
`label`	`string`	—	Progress bar label. Used as the accessible name.
`description`	`string`	—	Supplementary description.
`isIndeterminate`	`boolean`	`false`	Indeterminate state. Shows a looping animation and removes aria-valuenow.
`showValue`	`boolean`	`false`	Show the percentage next to the label.
`valueText`	`string`	—	Custom aria-valuetext and display text. Overrides the default percentage.
`width`	`number \| string`	—	Component width. Numbers are treated as px.

css

.my-progress-bar {
  --astryx-progress-bar-track-background: #e5e5e5;
  --astryx-progress-bar-fill-background: #171717;
}