jsx import { jsx , css , Interpolation , Theme } from "@emotion/react" ; import React from "react" ; import * as CSS from "csstype" ; import { adaptive , normalizeUnit } from "../utils/cssUtil" ; import { getBarChangeKeyFrames } from "./style" ; export interface IndicatorProps extends React . DetailedHTMLProps < React . HTMLAttributes < HTMLDivElement > , HTMLDivElement > { size ? : CSS . Property . Width | number ; rounded ? : boolean ; barWidth ? : number ; barHeight ? : number ; barColor ? : string ; barCount ? : number ; duration ? : number ; containerStyle ? : Interpolation < Theme > ; } param props export function Indicator ( props ) { const { size , rounded = true , barWidth = 7 , barHeight = 28 , barColor = "#fff" , barCount = 12 , duration = 600 , containerStyle , ... attributes } = props ; const radius = rounded ? barWidth / 2 : 0 ; const barList = [ ] ; for ( let i = 0 ; i < barCount ; i ++ ) { barList . push ( < rect key = { i } x = { ( 100 - barWidth ) / 2 } y = "0" rx = { radius } ry = { radius } width = { barWidth } height = { barHeight } transform = { `rotate(${ ( 360 / barCount ) * i }, 50, 50)` } css = { { animationDelay : `${ - ( duration * ( barCount - i ) ) / barCount }ms` , } } />); } const style = [ { fontSize : 0 , } , ] ; if ( typeof size !== "undefined" ) { const unitSize = normalizeUnit ( size ) ; style . push ( { width : unitSize , height : unitSize , } ) ; } else { style . push ( adaptive ( { width : 60 , height : 60 , } ) ) ; } const svgStyle = css ( { width : "100%" , height : "100%" , rect : { fill : "transparent" , animationName : getBarChangeKeyFrames ( barColor ) , animationDuration : `${ duration }ms` , animationTimingFunction : "linear" , animationIterationCount : "infinite" , } , } ) ; return ( < div css = { [ style , containerStyle ] } { ... attributes } > < svg viewBox = "0 0 100 100" css = { svgStyle } > { barList } < /svg> < /div>); }