Progress Bar

Introduction

A progress bar visually illustrates how far through a task a user is.

These properties can be used to customise the component.

Property	Description	Default Value
`--rpf-progress-bar-background-color`	Background color of the progress bar	`var(--rpf-grey-150)`
`--rpf-progress-bar-accent-color`	Color of the filled progress segment	`var(--rpf-navy-800)`
`--rpf-progress-bar-block-size`	Block size (height) of the progress bar	`var(--space-1)`
`--rpf-progress-bar-border-radius`	Border radius of the progress bar	`var(--space-1)`
`--rpf-progress-bar-gap`	Spacing between progress bar and label	`var(--space-3)`
`--rpf-progress-bar-font-size`	Font size for progress labels	`var(--font-size-1)`
`--rpf-progress-bar-font-weight`	Font weight for progress labels	`var(--font-weight-regular)`
`--rpf-progress-bar-complete-color`	Color indicator for completed status	`var(--rpf-alert-success)`
`--rpf-progress-bar-complete-icon`	Icon displayed when progress is complete	SVG checkmark in circle
`--color-progress-bar-complete`	⚠️ Deprecated - Color for completed segments	`var(--rpf-navy-800)`
`--color-progress-bar-incomplete`	⚠️ Deprecated - Color for incomplete segments	`var(--rpf-grey-150)`