Progress Bar

Progress indicators offer visibility of system status to the user, giving feedback to indicate that the application is taking some time to processing data. The main aim of these components is to reduce the user's uncertainty about offering something to look at while the user is waiting for the end. A progress bar should be used in any scenario that will take more than 1 second in performing the action, for anything that takes less than that time, it will be distracting for the user.

Code

Usage

Specifications

Props

Name	Default	Description
label: string		Text to be placed above the progress bar.
helperText: string		Helper text to be placed under the progress bar.
overlay: boolean	`false`	If true, the progress bar will be displayed as a modal.
value: number		The value of the progress indicator. If it's received the component is determinate otherwise is indeterminate.
showValue: boolean	`false`	If true, the value is displayed above the progress bar.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.

Examples

Basic Usage

() => {
    return (
      <DxcInset space="2rem">
        <DxcProgressBar label="Loading" />
      </DxcInset>
    );
  }

() => {
    return (
      <DxcInset space="2rem">
        <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="2rem">
      <DxcFlex direction="column" gap="2rem" alignItems="flex-start">
        <DxcButton
          label="Show Progress Bar for 3 seconds"
          onClick={showModal}
        />

        {isVisible && (
          <DxcProgressBar
            label="Loading"
            overlay={true}
          />
        )}
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  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="2rem">
      <DxcFlex direction="column" gap="2rem" alignItems="flex-start">
        <DxcButton
          label="Show Progress Bar for 3 seconds"
          onClick={showModal}
        />

        {isVisible && (
          <DxcProgressBar
            label="Loading"
            overlay={true}
          />
        )}
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Basic Usage
- Overlay

Edit this page on GitHub

Password Input

NextQuick Nav

Progress Bar

Props

Examples

Basic Usage

Overlay

Contents