UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

55 lines (52 loc) 1.43 kB
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 };