Progress indicator

1export type ProgressIndicatorProps = {2  value?: number;3  label?: string;4  showValue?: boolean;5};6 7/** A semantic progressbar with determinate and indeterminate modes. */8export function ProgressIndicator({9  value,10  label = "Loading",11  showValue = false,12}: ProgressIndicatorProps) {13  const amount =14    value === undefined ? undefined : Math.max(0, Math.min(100, value));15  return (16    <div className="gamma-progress">17      {(showValue || label) && (18        <div className="gamma-progress-caption">19          <span>{label}</span>20          {showValue && (21            <strong>22              {amount === undefined ? "…" : `${Math.round(amount)}%`}23            </strong>24          )}25        </div>26      )}27      <div28        className={`gamma-progress-track${amount === undefined ? " is-indeterminate" : ""}`}