react-loader-spinner
Version:
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
1 lines • 7.18 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/shared/svg-wrapper.tsx","../src/loader/rotating-lines.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","SvgWrapper","styled","props","POINTS","spin","keyframes","Svg","Polyline","RotatingLines","height","width","color","strokeWidth","animationDuration","strokeColor","visible","ariaLabel","wrapperStyle","wrapperClass","lines","useCallback","point","jsx"],"mappings":"gHAEO,IAAMA,CAAAA,CAAgB,SAAA,CAEhBC,CAAAA,CAA6B,CACxC,YAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,4BAAA,CCEtB,IAAMC,CAAAA,CAAaC,CAAAA,CAAO,GAAA;AAAA,WAAA,EACpBC,CAAAA,EAAUA,CAAAA,CAAM,QAAA,CAAW,MAAA,CAAS,MAAO,CAAA;AC6GhD,CAAA,CA5ER,IAAMC,EAAS,CAAC,CAAA,CAAG,GAAI,EAAA,CAAI,EAAA,CAAI,GAAA,CAAK,GAAA,CAAK,IAAK,GAAA,CAAK,GAAA,CAAK,IAAK,GAAA,CAAK,GAAG,EAE/DC,CAAAA,CAAOC,SAAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAMPC,EAAML,CAAAA,CAAO,GAAA;AAAA,aAAA,EACJG,CAAI,CAAA,CAAA,EAAIF,CAAAA,EAAU,MAAA,CAAOA,CAAAA,CAAM,kBAAkB,CAAA,CAAE,QAAA,CAAS,GAAG,CAAA,CAAI,OAAOA,CAAAA,CAAM,kBAAkB,EAAI,CAAA,EAAGA,CAAAA,CAAM,kBAAkB,CAAA,CAAA,CAAI,CAAA;AAAA,CAAA,CAG9IK,EAAWN,CAAAA,CAAO,QAAA;AAAA,gBAAA,EACNC,CAAAA,EAAS,CAAA,EAAGA,CAAAA,CAAM,YAAY,CAAA,EAAA,CAAI,CAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,CAAA,CAgDvCM,CAAAA,CAAuD,CAAC,CACnE,MAAA,CAAAC,CAAAA,CAAS,GACT,KAAA,CAAAC,CAAAA,CAAQ,EAAA,CACR,KAAA,CAAAC,CAAAA,CAAQd,CAAAA,CACR,YAAAe,CAAAA,CAAc,CAAA,CACd,iBAAA,CAAAC,CAAAA,CAAoB,GAAA,CACpB,WAAA,CAAAC,EACA,OAAA,CAAAC,CAAAA,CAAU,IAAA,CACV,SAAA,CAAAC,CAAAA,CAAY,wBAAA,CACZ,aAAAC,CAAAA,CACA,YAAA,CAAAC,CACF,CAAA,GAAM,CACJ,IAAMC,EAAQC,WAAAA,CACZ,IACEjB,CAAAA,CAAO,GAAA,CAAIkB,CAAAA,EACTC,GAAAA,CAACf,EAAA,CAEC,MAAA,CAAO,YAAA,CACP,YAAA,CAAcK,CAAAA,CACd,SAAA,CAAW,UAAUS,CAAK,CAAA,SAAA,CAAA,CAAA,CAHrBA,CAIP,CACD,CAAA,CACH,CAACT,CAAW,CACd,CAAA,CAEA,OAAKG,CAAAA,CAGHO,GAAAA,CAACtB,CAAAA,CAAA,CACC,KAAA,CAAOiB,CAAAA,CACP,QAAA,CAAUF,CAAAA,CACV,SAAA,CAAWG,CAAAA,CACX,aAAYF,CAAAA,CACZ,aAAA,CAAY,wBAAA,CACX,GAAGlB,CAAAA,CAEJ,QAAA,CAAAwB,IAAChB,CAAAA,CAAA,CACC,KAAA,CAAOP,CAAAA,CACP,OAAA,CAAQ,WAAA,CACR,MAAOW,CAAAA,CACP,MAAA,CAAQD,CAAAA,CACR,MAAA,CAAQK,CAAAA,EAAA,IAAA,CAAAA,EAAeH,CAAAA,CACvB,kBAAA,CAAoBE,CAAAA,CACpB,KAAA,CAAO,MAAA,CAAOA,CAAiB,EAC/B,YAAA,CAAYG,CAAAA,CACZ,aAAA,CAAY,oBAAA,CACX,GAAGlB,CAAAA,CAEH,SAAAqB,CAAAA,EAAM,CACT,CAAA,CACF,CAAA,CAzBmB,IA2BvB","file":"rotating-lines.mjs","sourcesContent":["import { CSSProperties } from 'react'\n\nexport const DEFAULT_COLOR = '#4fa94d'\n\nexport const DEFAULT_WAI_ARIA_ATTRIBUTE = {\n 'aria-busy': true,\n role: 'progressbar',\n}\n\n// Reuse React's CSSProperties for consistent style typing across components\nexport type Style = CSSProperties\n\n// PrimaryProps includes common props shared by experimental components\nexport interface PrimaryProps {\n height?: string | number\n width?: string | number\n color?: string\n ariaLabel?: string\n wrapperStyle?: CSSProperties\n wrapperClass?: string\n visible?: boolean\n}\n\n\n","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import styled from 'styled-components'\n\nexport const SvgWrapper = styled.div<{ $visible: boolean }>`\n display: ${props => (props.$visible ? 'flex' : 'none')};\n`\n","import { useCallback, FunctionComponent, CSSProperties } from 'react'\nimport styled, { keyframes } from 'styled-components'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\nimport { SvgWrapper } from '../shared/svg-wrapper'\n\n/**\n * Props for the RotatingLines loader component.\n * \n * The RotatingLines loader displays rotating lines in a circular pattern.\n * \n * @interface RotatingLinesProps\n */\ninterface RotatingLinesProps {\n /** Height of the SVG (number interpreted as px). */\n height?: string | number\n /** Width of the SVG (number interpreted as px). */\n width?: string | number\n /** Primary color applied to the loader. Defaults to DEFAULT_COLOR. */\n color?: string\n /** Accessible label announced to screen readers. */\n ariaLabel?: string\n /** Inline style object applied to the wrapper element. */\n wrapperStyle?: CSSProperties\n /** CSS class applied to the wrapper for custom styling. */\n wrapperClass?: string\n /** When false, the loader is not rendered. Defaults to true. */\n visible?: boolean\n /** Stroke width of the rotating lines. */\n strokeWidth?: string | number\n /** Duration of the rotation animation in seconds. */\n animationDuration?: string | number\n /** Color of the stroke for the lines. */\n strokeColor?: string\n}\n\nconst POINTS = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]\n\nconst spin = keyframes`\nto {\n transform: rotate(360deg);\n }\n`\n\nconst Svg = styled.svg<{ $animationDuration: string | number }>`\n animation: ${spin} ${props => (String(props.$animationDuration).endsWith('s') ? String(props.$animationDuration) : `${props.$animationDuration}s`)} steps(12, end) infinite;\n`\n\nconst Polyline = styled.polyline<{ $strokeWidth: string | number }>`\n stroke-width: ${props => `${props.$strokeWidth}px`};\n stroke-linecap: round;\n\n &:nth-child(12n + 0) {\n stroke-opacity: 0.08;\n }\n\n &:nth-child(12n + 1) {\n stroke-opacity: 0.17;\n }\n\n &:nth-child(12n + 2) {\n stroke-opacity: 0.25;\n }\n\n &:nth-child(12n + 3) {\n stroke-opacity: 0.33;\n }\n\n &:nth-child(12n + 4) {\n stroke-opacity: 0.42;\n }\n\n &:nth-child(12n + 5) {\n stroke-opacity: 0.5;\n }\n\n &:nth-child(12n + 6) {\n stroke-opacity: 0.58;\n }\n\n &:nth-child(12n + 7) {\n stroke-opacity: 0.66;\n }\n\n &:nth-child(12n + 8) {\n stroke-opacity: 0.75;\n }\n\n &:nth-child(12n + 9) {\n stroke-opacity: 0.83;\n }\n\n &:nth-child(12n + 11) {\n stroke-opacity: 0.92;\n }\n`\n\nexport const RotatingLines: FunctionComponent<RotatingLinesProps> = ({\n height = 96,\n width = 96,\n color = DEFAULT_COLOR,\n strokeWidth = 5,\n animationDuration = 0.75,\n strokeColor,\n visible = true,\n ariaLabel = 'rotating-lines-loading',\n wrapperStyle,\n wrapperClass,\n}) => {\n const lines = useCallback(\n () =>\n POINTS.map(point => (\n <Polyline\n key={point}\n points=\"24,12 24,4\"\n $strokeWidth={strokeWidth}\n transform={`rotate(${point}, 24, 24)`}\n />\n )),\n [strokeWidth]\n )\n\n if (!visible) return null\n\n return (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n aria-label={ariaLabel}\n data-testid=\"rotating-lines-loading\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <Svg\n xmlns={SVG_NAMESPACE}\n viewBox=\"0 0 48 48\"\n width={width}\n height={height}\n stroke={strokeColor ?? color}\n $animationDuration={animationDuration}\n speed={String(animationDuration)}\n aria-label={ariaLabel}\n data-testid=\"rotating-lines-svg\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n {lines()}\n </Svg>\n </SvgWrapper>\n )\n}\n"]}