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 • 6.15 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/shared/constants.ts","../src/loader/rotating-square.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","RotatingSquare","wrapperClass","color","height","width","strokeWidth","ariaLabel","wrapperStyle","visible","jsx","jsxs"],"mappings":"wMAEO,IAAMA,CAAAA,CAAgB,SAAA,CAEhBC,CAAAA,CAA6B,CACxC,YAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCLO,IAAMC,EAAaC,kBAAAA,CAAO,GAAA;AAAA,WAAA,EACpBC,CAAAA,EAAUA,CAAAA,CAAM,QAAA,CAAW,MAAA,CAAS,MAAO,CAAA;ACHjD,CAAA,CAAA,IAAMC,CAAAA,CAAgB,4BAAA,CCwCtB,IAAMC,EAAyD,CAAC,CACrE,YAAA,CAAAC,CAAAA,CAAe,GACf,KAAA,CAAAC,CAAAA,CAAQR,CAAAA,CACR,MAAA,CAAAS,CAAAA,CAAS,GAAA,CACT,KAAA,CAAAC,CAAAA,CAAQ,IACR,WAAA,CAAAC,CAAAA,CAAc,CAAA,CACd,SAAA,CAAAC,EAAY,yBAAA,CACZ,YAAA,CAAAC,CAAAA,CAAe,GACf,OAAA,CAAAC,CAAAA,CAAU,IACZ,CAAA,GAEIC,cAAAA,CAACb,CAAAA,CAAA,CACC,KAAA,CAAOW,EACP,QAAA,CAAUC,CAAAA,CACV,SAAA,CAAWP,CAAAA,CACX,cAAY,yBAAA,CACZ,YAAA,CAAYK,CAAAA,CACX,GAAGX,EAEJ,QAAA,CAAAe,eAAAA,CAAC,KAAA,CAAA,CACC,OAAA,CAAQ,MACR,KAAA,CAAOX,CAAAA,CACP,CAAA,CAAE,KAAA,CACF,EAAE,KAAA,CACF,OAAA,CAAQ,aAAA,CACR,gBAAA,CAAiB,kBACjB,MAAA,CAAQ,CAAA,EAAGI,CAAM,CAAA,CAAA,CACjB,MAAO,CAAA,EAAGC,CAAK,CAAA,CAAA,CACf,aAAA,CAAY,qBAAA,CACZ,QAAA,CAAS,UAAA,CAET,QAAA,CAAA,CAAAK,eAAC,MAAA,CAAA,CACC,IAAA,CAAK,MAAA,CACL,MAAA,CAAQP,EACR,WAAA,CAAaG,CAAAA,CACb,CAAA,CAAE,IAAA,CACF,EAAE,IAAA,CACF,KAAA,CAAM,IAAA,CACN,MAAA,CAAO,KAEP,QAAA,CAAAI,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,YACd,GAAA,CAAI,MAAA,CACJ,IAAA,CAAK,SAAA,CACL,GAAG,WAAA,CACH,IAAA,CAAK,QAAA,CACL,EAAA,CAAG,YACH,aAAA,CAAc,KAAA,CACd,KAAA,CAAM,aAAA,CACR,CAAA,CACF,CAAA,CACAA,cAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,IAAA,CAAK,CAAA,CAAE,IAAA,CAAK,IAAA,CAAMP,EAAO,KAAA,CAAM,IAAA,CAAK,MAAA,CAAO,IAAA,CACjD,SAAAO,cAAAA,CAAC,SAAA,CAAA,CACC,aAAA,CAAc,QAAA,CACd,IAAI,MAAA,CACJ,aAAA,CAAc,KAAA,CACd,IAAA,CAAK,KACL,EAAA,CAAG,GAAA,CACH,EAAA,CAAG,SAAA,CACH,KAAK,QAAA,CACL,KAAA,CAAM,kBAAA,CACR,CAAA,CACF,GACF,CAAA,CACF","file":"rotating-square.cjs","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","import styled from 'styled-components'\n\nexport const SvgWrapper = styled.div<{ $visible: boolean }>`\n display: ${props => (props.$visible ? 'flex' : 'none')};\n`\n","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE, Style } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the RotatingSquare loader component.\n * \n * The RotatingSquare loader displays a square with rotating animation.\n * \n * @interface RotatingSquareProps\n */\ninterface RotatingSquareProps {\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. */\n color?: string\n /** Stroke width of the square outline. Affects the thickness of the square border. */\n strokeWidth?: string | number\n /** Accessible label announced to screen readers. */\n ariaLabel?: string\n /** Inline style object applied to the wrapper element. */\n wrapperStyle?: Style\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 /** \n * Provide multiple colors to render a gradient instead of a solid color.\n * When 2 or more colors are supplied a gradient will be applied to the loader.\n */\n colors?: string[]\n /** Type of gradient (linear or radial). Defaults to linear. */\n gradientType?: 'linear' | 'radial'\n /** Angle (in degrees) applied via rotate() transform for linear gradients. */\n gradientAngle?: number\n}\n\nexport const RotatingSquare: FunctionComponent<RotatingSquareProps> = ({\n wrapperClass = '',\n color = DEFAULT_COLOR,\n height = 100,\n width = 100,\n strokeWidth = 4,\n ariaLabel = 'rotating-square-loading',\n wrapperStyle = {},\n visible = true,\n}) => {\n return (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n data-testid=\"rotating-square-wrapper\"\n aria-label={ariaLabel}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n version=\"1.1\"\n xmlns={SVG_NAMESPACE}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enableBackground=\"new 0 0 100 100\"\n height={`${height}`}\n width={`${width}`}\n data-testid=\"rotating-square-svg\"\n xmlSpace=\"preserve\"\n >\n <rect\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n x=\"25\"\n y=\"25\"\n width=\"50\"\n height=\"50\"\n >\n <animateTransform\n attributeName=\"transform\"\n dur=\"0.5s\"\n from=\"0 50 50\"\n to=\"180 50 50\"\n type=\"rotate\"\n id=\"strokeBox\"\n attributeType=\"XML\"\n begin=\"rectBox.end\"\n />\n </rect>\n <rect x=\"27\" y=\"27\" fill={color} width=\"46\" height=\"50\">\n <animate\n attributeName=\"height\"\n dur=\"1.3s\"\n attributeType=\"XML\"\n from=\"50\"\n to=\"0\"\n id=\"rectBox\"\n fill=\"freeze\"\n begin=\"0s;strokeBox.end\"\n />\n </rect>\n </svg>\n </SvgWrapper>\n )\n}\n"]}