Progress Bar

NbProgressBar shows how far an operation has advanced against a known total, or an indeterminate animation while the total is still unknown. Follow it with a finished or error status so users get explicit closure.

<template>
  <NbProgressBar
    label="Uploading assets"
    helper="42 of 64 files"
    :value="42"
    :max="64"
  />
</template>

Indeterminate ​

Omit value while the total amount of work is unknown and the bar sweeps continuously.

<template>
  <NbProgressBar label="Preparing export" helper="Contacting server..." />
</template>

Sizes ​

md (8px track) is the default. Use sm (4px track) in dense layouts or when the bar accompanies another component.

Status ​

finished and error fill the track, recolor the bar, and show a status icon next to the label. When status is error the helper text switches to the error style automatically.

<template>
  <NbProgressBar
    label="Upload failed"
    helper="Connection lost, retry in 30s"
    status="error"
  />
</template>

Simulated progress ​

Props ​

Accessibility ​

• The track exposes role="progressbar" with aria-valuemin, aria-valuemax and aria-valuenow (omitted while indeterminate).
• The label prop doubles as the aria-label of the progress bar.
• Status changes are also conveyed by the icon and helper text, not only by color.