jsx import { jsx , keyframes } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import { ANIMATION , DURATION } from '../Identity/motions' ; export interface LoadingProps < T = SVGSVGElement > extends React . SVGProps < T > { color ? : string ; progress ? : number ; size ? : number ; } export const Loading = ( { progress = undefined , size = 43 , color = '#218fd1' , ... props } ) => { const pathLength = 125.68 ; const rotationOffset = - 0.75 ; const rotationDelay = DURATION . EXTRA_LONG * rotationOffset ; const fillAnimation = keyframes `
    0% {
      stroke-dashoffset: ${ pathLength + pathLength };
    }
    100% {
      stroke-dashoffset: 0;
    }
  ` ; return ( < svg width = { size } height = { size } viewBox = "0 0 43 43" strokeWidth = "3" fill = "none" { ... props } > < circle cx = "21.5" cy = "21.5" r = "20" stroke = { COLOR . opaque ( color , 0.08 ) } / > < circle css = { ! progress && { animation : `${ fillAnimation } ${ DURATION . EXTRA_LONG }ms ease-in-out infinite,
              ${ ANIMATION . rotate } ${ DURATION . EXTRA_LONG }ms linear ${ rotationDelay }ms infinite` , strokeDasharray : pathLength , transformOrigin : '50% 50%' , } } cx = "21.5" cy = "21.5" r = "20" stroke = { color } strokeLinecap = "round" strokeDasharray = { pathLength } strokeDashoffset = { progress && `${ pathLength - pathLength * progress }` } /> < /svg>); } ; Loading . defaultProps = { progress : undefined , size : 43 , } ;