ProgressReady

Progress component is used to display a circular pie-chart style progress indicator. You can customize the size and color of the progress indicator with the provided properties.

Open in new window

View RTL

<nord-progress progress="25"></nord-progress>

<nord-stack direction="horizontal" align-items="center">
  <nord-progress progress="50" color="success"></nord-progress>
  <nord-progress progress="50" color="warning"></nord-progress>
  <nord-progress progress="50" color="danger"></nord-progress>
  <nord-progress progress="50" color="highlight"></nord-progress>
  <nord-progress progress="50" color="info"></nord-progress>
</nord-stack>

<nord-stack direction="horizontal" align-items="center">
  <nord-progress progress="50" color="var(--n-color-accent)"></nord-progress>
  <nord-progress progress="50" color="#6366f1"></nord-progress>
  <nord-progress progress="50" color="rgb(236, 72, 153)"></nord-progress>
</nord-stack>

<nord-stack direction="horizontal" align-items="center" gap="m">
  <nord-progress id="demo-progress" progress="0" size="xl" label="Demo progress"></nord-progress>
  <nord-button id="start-btn">Start</nord-button>
  <nord-button id="reset-btn" variant="plain">Reset</nord-button>
</nord-stack>

<script>
  const progress = document.getElementById("demo-progress")
  const startBtn = document.getElementById("start-btn")
  const resetBtn = document.getElementById("reset-btn")
  let interval

  startBtn.addEventListener("click", () => {
    clearInterval(interval)
    interval = setInterval(() => {
      const current = parseInt(progress.getAttribute("progress") || "0", 10)
      if (current >= 100) {
        clearInterval(interval)
        return
      }
      progress.setAttribute("progress", String(Math.min(100, current + 5)))
    }, 200)
  })

  resetBtn.addEventListener("click", () => {
    clearInterval(interval)
    progress.setAttribute("progress", "0")
  })
</script>

<nord-stack direction="horizontal" align-items="center">
  <nord-progress progress="0" size="l"></nord-progress>
  <nord-progress progress="25" size="l"></nord-progress>
  <nord-progress progress="50" size="l"></nord-progress>
  <nord-progress progress="75" size="l"></nord-progress>
  <nord-progress progress="100" size="l"></nord-progress>
</nord-stack>

<nord-stack direction="horizontal" align-items="center">
  <nord-progress progress="75" size="xs"></nord-progress>
  <nord-progress progress="75" size="s"></nord-progress>
  <nord-progress progress="75" size="m"></nord-progress>
  <nord-progress progress="75" size="l"></nord-progress>
  <nord-progress progress="75" size="xl"></nord-progress>
  <nord-progress progress="75" size="xxl"></nord-progress>
</nord-stack>

<nord-progress progress="60" size="l" label="Upload progress: 60%"></nord-progress>

Properties

Property	Attribute	Description	Type	Default
`size`	`size`	The size of the progress indicator.	`"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"`	`"m"`
`color`	`color`	The color of the progress indicator. Can accept any valid CSS color value, including custom properties. Takes precedence over the `--n-progress-color` CSS custom property.	`string \| undefined`	`undefined`
`label`	`label`	An accessible label for the progress indicator. If no label is supplied, the component is hidden from assistive technology.	`string \| undefined`	`undefined`
`progress`	`progress`	The progress percentage value.	`number`	`0`

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-color`	Controls the color of the progress indicator.	`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 a task with a circular indicator.
Use when you can determine the percentage of the completed task at any time.
Use the label property to provide an accessible label for the progress indicator.
Use for compact spaces where a circular indicator is more appropriate than a linear progress bar.

Don't

Don't use for indeterminate loading states, see Spinner instead.
Don't use when a linear representation of progress is more appropriate, see Progress Bar 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.

Edit page

ProgressReady

Properties

CSS Properties

Usage #

Do #

Don't #

Integration

Troubleshooting

Was this page helpful?

Usage

Do

Don't