@itwin/itwinui-react/esm/core/ProgressIndicators/ProgressLinear.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box, ShadowRoot, getBoundedValue } from '../../utils/index.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
  let {
    value,
    indeterminate = void 0 === value,
    labels = [],
    isAnimated = false,
    status,
    className,
    labelGroupProps,
    ...rest
  } = props;
  let boundedValue = getBoundedValue(value ?? 100, 0, 100);
  return React.createElement(
    Box,
    {
      className: cx('iui-progress-indicator-linear', className),
      ref: forwardedRef,
      'data-iui-status': status,
      'data-iui-indeterminate': indeterminate ? 'true' : void 0,
      'data-iui-animated': isAnimated ? 'true' : void 0,
      ...rest,
      style: {
        '--iui-progress-percentage': `${boundedValue}%`,
        ...props.style,
      },
    },
    React.createElement(
      ShadowRoot,
      null,
      100 !== value && React.createElement(VisuallyHidden, null, 'Loading.'),
      React.createElement('slot', null),
    ),
    labels.length > 0 &&
      React.createElement(
        Box,
        {
          as: 'div',
          ...labelGroupProps,
          className: cx(
            'iui-progress-indicator-linear-label',
            labelGroupProps?.className,
          ),
        },
        labels.map((label, index) =>
          React.createElement(
            'span',
            {
              key: index,
            },
            label,
          ),
        ),
      ),
  );
});
if ('development' === process.env.NODE_ENV)
  ProgressLinear.displayName = 'ProgressLinear';