@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
55 lines (52 loc) • 1.43 kB
JavaScript
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 };