How to display percentage of progress completion in progress bar using fabric UI?

Question

I'm using fluent UI to display progress bar.

Link which I refered: https://developer.microsoft.com/en-us/fluentui#/controls/web/progressindicator

I'm facing difficulty in displaying percentage in progress bar using react. Can someone suggest on this.

Thanks,

Answer 1

If all you want to show is the percentage number then all I did was to add the percentage to the <p> tag and used the percentage number used to increase the progress bar to display the percentage number.

Since the number increases from 0 to 1 as per the docs, what we can do is to multiply the output by 100 and take a Math.floor of that.

Codepen - Demo

const { ProgressIndicator, Fabric: FabricComponent, initializeIcons } = window.Fabric;

// Initialize icons in case this example uses them
initializeIcons();

const intervalDelay = 100;
const intervalIncrement = 0.01;

const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
  const [percentComplete, setPercentComplete] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setPercentComplete((intervalIncrement + percentComplete) % 1);
    }, intervalDelay);
    return () => {
      clearInterval(id);
    };
  });

  return (
    <>
      <ProgressIndicator label="Example title" description="Example description" 
      percentComplete={percentComplete} />
      <p>{Math.floor(percentComplete * 100)}%</p>
    </>
  );
};

const ProgressIndicatorBasicExampleWrapper = () => <FabricComponent><ProgressIndicatorBasicExample /></FabricComponent>;
ReactDOM.render(<ProgressIndicatorBasicExampleWrapper />, document.getElementById('content'))