@equinor/eds-core-react/dist/esm/components/Progress/Linear/LinearProgress.js

The React implementation of the Equinor Design System

import { forwardRef, useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import { primary } from './LinearProgress.tokens.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

const indeterminate = keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
const Track = styled.div.withConfig({
  displayName: "LinearProgress__Track",
  componentId: "sc-5orxpi-0"
})(["position:relative;overflow:hidden;height:4px;background-color:", ";width:100%;border-radius:50px;"], primary.background);
const ProgressBar = styled.div.withConfig({
  displayName: "LinearProgress__ProgressBar",
  componentId: "sc-5orxpi-1"
})(["transition:transform 0.4s linear;background-color:", ";width:100%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;"], primary.entities.progress.background);
const IndeterminateProgressBar = styled.div.withConfig({
  displayName: "LinearProgress__IndeterminateProgressBar",
  componentId: "sc-5orxpi-2"
})(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary.entities.progress.background, indeterminate);
const SrOnlyOutput = styled.output.withConfig({
  displayName: "LinearProgress__SrOnlyOutput",
  componentId: "sc-5orxpi-3"
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress({
  variant = 'indeterminate',
  value = null,
  ...rest
}, ref) {
  const props = {
    ...rest,
    ref
  };
  const [srProgress, setSrProgress] = useState(0);
  let barStyle;
  if (variant === 'determinate') {
    if (value !== undefined) {
      props['aria-valuenow'] = Math.round(value);
      props['aria-valuemin'] = 0;
      props['aria-valuemax'] = 100;
      const transform = value - 100;
      barStyle = `translateX(${transform}%)`;
    }
  }
  const transformStyle = {
    transform: barStyle
  };
  useEffect(() => {
    if (variant === 'indeterminate') return;
    if (value >= 25 && value < 50) {
      setSrProgress(25);
    } else if (value >= 50 && value < 75) {
      setSrProgress(50);
    } else if (value >= 75 && value < 100) {
      setSrProgress(75);
    } else if (value === 100) {
      setSrProgress(100);
    }
  }, [value, variant]);
  const getProgressFormatted = () => {
    return `Loading ${srProgress}%`;
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Track, {
      ...props,
      role: "progressbar",
      children: variant === 'indeterminate' ? /*#__PURE__*/jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsx(ProgressBar, {
        style: transformStyle
      })
    }), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
      children: getProgressFormatted()
    })]
  });
});

export { LinearProgress };