ProgressBar

ProgressBar component, for showing a simple progress bar, or a ProgressPanel, consisted of a progress bar, a label, details, and control buttons.

Features

• Showing process name and details.
• Indeterminate
• Value label for showing percentage when space is limited
• Pause, resume and cancel buttons.

Known issues

There are a couple of UI issues because of the current layout (which can be improved probably):

• max-width of the label and details, it's not necessarily aligned with the the progressbar track, because they don't share the same container
• when label is on the side, details is aligned with the label, instead of the progressbar track.

Live example

Result

Loading...

Live Editor

<> <ProgressBar value={20} /> <br /> <ProgressBar isIndeterminate name="Indeterminate" /> <br /> <ProgressBar value={40} name="With name, details and controls" details="10 files of 256 files - About 10 minutes left" button={ <> <ProgressBarPauseButton paused={false} /* try changing this to true */ /> {/* <ProgressBarStopButton /> */} </> } /> <br /> <ProgressBar value={70} name="Name on side:" namePosition="side" /> <br /> <br /> <ProgressBar value={70} name="With value label:" namePosition="side" showValueLabel /> <br /> <ProgressBar value={25} name="In dialog" button={<Button>Cancel</Button>} /> <br /> </>

<>
  <ProgressBar value={20} /> <br />
  <ProgressBar isIndeterminate name="Indeterminate" /> <br />
  <ProgressBar
    value={40}
    name="With name, details and controls"
    details="10 files of 256 files - About 10 minutes left"
    button={
      <>
        <ProgressBarPauseButton
          paused={false} /* try changing this to true */
        />
        {/* <ProgressBarStopButton /> */}
      </>
    }
  />
  <br />
  <ProgressBar value={70} name="Name on side:" namePosition="side" /> <br />
  <br />
  <ProgressBar
    value={70}
    name="With value label:"
    namePosition="side"
    showValueLabel
  />
  <br />
  <ProgressBar value={25} name="In dialog" button={<Button>Cancel</Button>} />
  <br />
</>