About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Progress Bar

<terra-progress-bar> | TerraProgressBar
Since 1.0 stable

Progress bars are used to show the status of an ongoing operation.

<terra-progress-bar value="50"></terra-progress-bar>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => <TerraProgressBar value={50} />;

Examples

Basic Usage

Progress bars display a value from 0 to 100. The value attribute represents the current progress as a percentage. 

<div>
  <terra-progress-bar value="0"></terra-progress-bar>
  <terra-progress-bar value="25"></terra-progress-bar>
  <terra-progress-bar value="50"></terra-progress-bar>
  <terra-progress-bar value="75"></terra-progress-bar>
  <terra-progress-bar value="100"></terra-progress-bar>
</div>

<style>
  terra-progress-bar:not(:last-child) {
    margin-bottom: 1rem;
  }
</style>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => (
  <>
    <TerraProgressBar value={0} />
    <TerraProgressBar value={25} />
    <TerraProgressBar value={50} />
    <TerraProgressBar value={75} />
    <TerraProgressBar value={100} />
  </>
);

Variants

Use the variant attribute to change the progress bar’s color variant.

<div>
  <terra-progress-bar variant="default" value="50"></terra-progress-bar>
  <terra-progress-bar variant="primary" value="50"></terra-progress-bar>
  <terra-progress-bar variant="success" value="50"></terra-progress-bar>
  <terra-progress-bar variant="warning" value="50"></terra-progress-bar>
  <terra-progress-bar variant="danger" value="50"></terra-progress-bar>
</div>

<style>
  terra-progress-bar:not(:last-child) {
    margin-bottom: 1rem;
  }
</style>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => (
  <>
    <TerraProgressBar variant="default" value={50} />
    <TerraProgressBar variant="primary" value={50} />
    <TerraProgressBar variant="success" value={50} />
    <TerraProgressBar variant="warning" value={50} />
    <TerraProgressBar variant="danger" value={50} />
  </>
);

Indeterminate

Use the indeterminate attribute to show an animated progress bar when the duration of an operation is unknown. 

<div>
  <terra-progress-bar indeterminate></terra-progress-bar>
  <terra-progress-bar variant="success" indeterminate></terra-progress-bar>
  <terra-progress-bar variant="warning" indeterminate></terra-progress-bar>
  <terra-progress-bar variant="danger" indeterminate></terra-progress-bar>
</div>

<style>
  terra-progress-bar:not(:last-child) {
    margin-bottom: 1rem;
  }
</style>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => (
  <>
    <TerraProgressBar indeterminate />
    <TerraProgressBar variant="success" indeterminate />
    <TerraProgressBar variant="warning" indeterminate />
    <TerraProgressBar variant="danger" indeterminate />
  </>
);

With Labels

You can display text inside the progress bar using the default slot. The text will be centered on the indicator.

50% 75% Complete Done! 
<div>
  <terra-progress-bar value="50">50%</terra-progress-bar>
  <terra-progress-bar value="75">75% Complete</terra-progress-bar>
  <terra-progress-bar variant="success" value="100">Done!</terra-progress-bar>
</div>

<style>
  terra-progress-bar:not(:last-child) {
    margin-bottom: 1rem;
  }
</style>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => (
  <>
    <TerraProgressBar value={50}>50%</TerraProgressBar>
    <TerraProgressBar value={75}>75% Complete</TerraProgressBar>
    <TerraProgressBar variant="success" value={100}>Done!</TerraProgressBar>
  </>
);

Custom Labels for Screen Readers

Use the label attribute to provide a custom label for assistive devices.

<div>
  <terra-progress-bar value="50" label="File upload progress"></terra-progress-bar>
  <terra-progress-bar value="75" label="Processing data"></terra-progress-bar>
</div>

<style>
  terra-progress-bar:not(:last-child) {
    margin-bottom: 1rem;
  }
</style>

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

const App = () => (
  <>
    <TerraProgressBar value={50} label="File upload progress" />
    <TerraProgressBar value={75} label="Processing data" />
  </>
);

Animated Progress

The progress bar automatically animates when the value changes, providing smooth visual feedback.

25% 50% 75% 100% 
<div>
  <terra-progress-bar id="animated-progress-bar" value="0"></terra-progress-bar>
  <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
    <terra-button onclick="document.getElementById('animated-progress-bar').value = 25">25%</terra-button>
    <terra-button onclick="document.getElementById('animated-progress-bar').value = 50">50%</terra-button>
    <terra-button onclick="document.getElementById('animated-progress-bar').value = 75">75%</terra-button>
    <terra-button onclick="document.getElementById('animated-progress-bar').value = 100">100%</terra-button>
  </div>
</div>

Custom Height

You can customize the height of the progress bar using CSS custom properties.

<terra-progress-bar value="50" style="--height: 2rem;"></terra-progress-bar>

Custom Colors

You can customize the track and indicator colors using CSS custom properties.

60% 
<terra-progress-bar
  value="60"
  style="--track-color: var(--terra-color-carbon-10); --indicator-color: var(--terra-color-nasa-blue);">
  60%
</terra-progress-bar>

[component-metadata:terra-progress-bar]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/progress-bar/progress-bar.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/progress-bar/progress-bar.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/progress-bar/progress-bar.js';

To import this component as a React component:

import TerraProgressBar from '@nasa-terra/components/dist/react/progress-bar';

Slots

Name Description
(default) A label to show inside the progress indicator.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The current progress as a percentage, 0 to 100. number 0
indeterminate When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. boolean false
label A custom label for assistive devices. string ''
variant The progress bar’s theme variant. 'default' | 'primary' | 'success' | 'warning' | 'danger' 'primary'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--height The progress bar’s height.
--track-color The color of the track.
--indicator-color The color of the indicator.
--label-color The color of the label.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
indicator The progress bar’s indicator.
label The progress bar’s label.

Learn more about customizing CSS parts.