Progress Bar

The progress bar component displays the progress of a task, usually on a scale from 0 to 100%. It can be used to show the progress of a download, upload, form completion, or any other process that can be represented as a percentage.

Example

Shows linear progress indication of ongoing tasks or loading states.

<script type="module">
  import '@blueprintui/components/include/progress-bar.js';
</script>

<div bp-layout="block gap:xs">
  <bp-progress-bar value="75"></bp-progress-bar>
  <bp-progress-bar value="75" status="accent"></bp-progress-bar>
  <bp-progress-bar value="75" status="success"></bp-progress-bar>
  <bp-progress-bar value="75" status="warning"></bp-progress-bar>
  <bp-progress-bar value="75" status="danger"></bp-progress-bar>
</div>

Progress Bar Indeterminate

Demonstrates indeterminate progress state for unknown duration tasks.

<div bp-layout="block gap:xs">
  <bp-progress-bar></bp-progress-bar>
  <bp-progress-bar status="accent"></bp-progress-bar>
  <bp-progress-bar status="success"></bp-progress-bar>
  <bp-progress-bar status="warning"></bp-progress-bar>
  <bp-progress-bar status="danger"></bp-progress-bar>
</div>

Install

NPM

// npm package
import '@blueprintui/components/include/progress-bar.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/progress-bar.js/+esm';
</script>

Accessibility

• Provide a label that accurately describes the purpose of the progress bar
• Use a visually distinguishable color to show the progress of the task
• Ensure the contrast ratio between the bar color and its background is high enough to meet accessibility standards
• Provide alternative text to describe the progress bar for users who use screen readers

bp-progress-bar

Properties

Attributes

CSS Properties