ProgressBar.tsx

importReactfrom'@theia/core/shared/react';

exporttypeProgressBarProps={
percent?: number;
showPercentage?: boolean;
};

exportdefaultfunctionProgressBar({
 percent =0,
 showPercentage =false,
}: ProgressBarProps): React.ReactElement{
constroundedPercent=Math.round(percent);
return(
<divclassName="progress-bar">
<divclassName="progress-bar--outer">
<div
className="progress-bar--inner"
style={{width: `${roundedPercent}%`}}
/>
</div>
{showPercentage&&(
<divclassName="progress-bar--percentage">
<divclassName="progress-bar--percentage-text">{roundedPercent}%</div>
</div>
)}
</div>
);
}