@equinor/eds-core-react/dist/esm/components/Progress/Dots/DotProgress.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { keyframes } from 'styled-components';
import * as DotProgress_tokens from './DotProgress.tokens.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const opacity = keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
const Svg = styled.svg.withConfig({
  displayName: "DotProgress__Svg",
  componentId: "sc-1s6o2q7-0"
})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], ({
  color
}) => color, opacity, opacity, opacity);
const getColor = color => {
  if (DotProgress_tokens[color]) {
    return DotProgress_tokens[color].background;
  }
  return color;
};
const DotProgress = /*#__PURE__*/forwardRef(function DotProgress({
  color = 'neutral',
  size = 32,
  ...rest
}, ref) {
  const props = {
    ...rest,
    color: getColor(color),
    ref
  };
  const height = size / 4;
  const width = size;
  return /*#__PURE__*/jsxs(Svg, {
    ...props,
    role: "progressbar",
    viewBox: "0 0 16 4",
    height: height,
    width: width,
    preserveAspectRatio: "xMidYMid meet",
    children: [/*#__PURE__*/jsx("circle", {
      cx: 2,
      cy: 2,
      r: 2
    }), /*#__PURE__*/jsx("circle", {
      cx: 8,
      cy: 2,
      r: 2
    }), /*#__PURE__*/jsx("circle", {
      cx: 14,
      cy: 2,
      r: 2
    })]
  });
});

export { DotProgress };