Progress BarReady

Progress Bar is used to visually represent the completion of a task or process. It shows how much of the task has been completed and how much is still left.

Open in new window

View RTL

<nord-progress-bar value="40"></nord-progress-bar>

<nord-progress-bar></nord-progress-bar>

<nord-stack>
  <nord-progress-bar></nord-progress-bar>
  <nord-stack direction="horizontal" gap="s">
    <nord-button size="s" onclick="increase()">Increase</nord-button>
    <nord-button size="s" onclick="decrease()">Decrease</nord-button>
    <nord-button size="s" onclick="complete()" variant="primary">Complete</nord-button>
    <nord-button size="s" onclick="reset()" variant="danger">Reset</nord-button>
  </nord-stack>
</nord-stack>

<style>
  nord-progress-bar[value="100"] {
    --n-progress-color: var(--n-color-status-success);
  }
</style>

<script>
  const progress = document.querySelector("nord-progress-bar")

  function increase() {
    const { value = 0 } = progress
    progress.value = Math.min(value + 20, 100)
  }

  function decrease() {
    const { value = 0 } = progress
    progress.value = Math.max(value - 20, 0)
    if (value <= 20) {
      progress.value = undefined
    }
  }

  function complete() {
    progress.value = 100
    progress.focus()
  }

  function reset() {
    progress.value = undefined
  }
</script>

<nord-progress-bar value="0.8" max="1"></nord-progress-bar>

<nord-stack>
  <p>Default style:</p>
  <nord-progress-bar value="40"></nord-progress-bar>
  <p>Custom border radius:</p>
  <nord-progress-bar style="--n-progress-border-radius: var(--n-border-radius-sharp)" value="60"></nord-progress-bar>
  <p>Custom color:</p>
  <nord-progress-bar style="--n-progress-color: var(--n-color-status-success)" value="100"></nord-progress-bar>
  <p>Custom size:</p>
  <nord-progress-bar style="--n-progress-size: var(--n-space-m)" value="80"></nord-progress-bar>
</nord-stack>

Properties

Property	Attribute	Description	Type	Default
`value`	`value`	Specifies how much of the task has been completed. Must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted. If there is no value, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it’s expected to take.	`number \| undefined`	`undefined`
`max`	`max`	Describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number.	`number`	`100`
`label`	`label`	Accessible label for the progress indicator. Visually hidden, but shown for assistive technology.	`string`	`"Current progress"`

Methods

Method name	Parameters	Description
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-progress-size`	Controls the thickness of the progress bar, using our spacing tokens.	`var(--n-space-s)`
`--n-progress-border-radius`	Controls how rounded the corners are, using border radius tokens.	`var(--n-border-radius-s)`
`--n-progress-color`	Controls the color of the progress bar, using color tokens.	`var(--n-color-accent)`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Use to show the completion status of an ongoing task.
Use progress bar when you can determine the percentage of the completed task at any time.
Always provide an accessible label when using Progress Bar.

Don’t #

Don’t use in constrained spaces indicating indeterminate loading state, see Spinner instead.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.