DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Progress bar

A progress bar visually indicates the completion status of a task or process.

Overview
Code

Props

NameTypeDescriptionDefault
ariaLabelstringSpecifies a string to be used as the name for the progress bar element when no label is provided.'Progress bar'
helperTextstringHelper text to be placed under the progress bar.-
labelstringText to be placed above the progress bar.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
overlaybooleanIf true, the progress bar will be displayed as a modal.false
showValuebooleanIf true, the determined value is displayed above the progress bar.false
valuenumberThe value of the progress indicator. If it's received the component is determinate otherwise is indeterminate.-

Examples

Basic Usage

() => (
  <DxcInset space="var(--spacing-padding-xl)">
    <DxcProgressBar label="Loading" />
  </DxcInset>
);

Overlay

() => {
  const [isVisible, changeIsVisible] = useState(false);
  const showModal = () => {
    changeIsVisible(true);
    fetchData().then(() => {
      changeIsVisible(false);
    });
  };
  
  const fetchData = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    });
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-xl)" alignItems="flex-start">
        <DxcButton
          label="Show Progress Bar for 3 seconds"
          onClick={showModal}
        />
        {isVisible && (
          <DxcProgressBar
            label="Loading"
            overlay
          />
        )}
      </DxcFlex>
    </DxcInset>
  );
}
On this page