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.29 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/shared/constants.ts","../src/loader/watch.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","Watch","height","width","radius","color","ariaLabel","wrapperStyle","wrapperClass","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,EAAgB,4BAAA,CCuCtB,IAAMC,CAAAA,CAAuC,CAAC,CACnD,MAAA,CAAAC,EAAS,EAAA,CACT,KAAA,CAAAC,EAAQ,EAAA,CACR,MAAA,CAAAC,CAAAA,CAAS,EAAA,CACT,MAAAC,CAAAA,CAAQV,CAAAA,CACR,SAAA,CAAAW,CAAAA,CAAY,gBACZ,YAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,IACZ,IACEC,cAAAA,CAACb,CAAAA,CAAA,CACC,KAAA,CAAOU,CAAAA,CACP,QAAA,CAAUE,CAAAA,CACV,UAAWD,CAAAA,CACX,aAAA,CAAY,eAAA,CACZ,YAAA,CAAYF,EACX,GAAGV,CAAAA,CAEJ,QAAA,CAAAe,eAAAA,CAAC,OACC,KAAA,CAAOR,CAAAA,CACP,OAAQD,CAAAA,CACR,OAAA,CAAQ,MACR,EAAA,CAAG,IAAA,CACH,KAAA,CAAOF,CAAAA,CACP,EAAE,KAAA,CACF,CAAA,CAAE,MACF,OAAA,CAAQ,aAAA,CACR,iBAAiB,iBAAA,CACjB,QAAA,CAAS,UAAA,CACT,aAAA,CAAY,YAEZ,QAAA,CAAA,CAAAU,cAAAA,CAAC,UACC,IAAA,CAAK,MAAA,CACL,OAAQL,CAAAA,CACR,WAAA,CAAY,GAAA,CACZ,gBAAA,CAAiB,KACjB,EAAA,CAAG,IAAA,CACH,EAAA,CAAG,IAAA,CACH,EAAGD,CAAAA,CACL,CAAA,CACAM,cAAAA,CAAC,MAAA,CAAA,CACC,KAAK,MAAA,CACL,aAAA,CAAc,QACd,MAAA,CAAQL,CAAAA,CACR,YAAY,GAAA,CACZ,gBAAA,CAAiB,IAAA,CACjB,EAAA,CAAG,KACH,EAAA,CAAG,IAAA,CACH,GAAG,IAAA,CACH,EAAA,CAAG,OAEH,QAAA,CAAAK,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,YACd,GAAA,CAAI,IAAA,CACJ,KAAK,QAAA,CACL,IAAA,CAAK,UACL,EAAA,CAAG,WAAA,CACH,WAAA,CAAY,YAAA,CACd,EACF,CAAA,CACAA,cAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAK,OACL,aAAA,CAAc,OAAA,CACd,MAAA,CAAQL,CAAAA,CACR,YAAY,GAAA,CACZ,gBAAA,CAAiB,KACjB,EAAA,CAAG,IAAA,CACH,GAAG,IAAA,CACH,EAAA,CAAG,MAAA,CACH,EAAA,CAAG,KAEH,QAAA,CAAAK,cAAAA,CAAC,oBACC,aAAA,CAAc,WAAA,CACd,IAAI,KAAA,CACJ,IAAA,CAAK,QAAA,CACL,IAAA,CAAK,UACL,EAAA,CAAG,WAAA,CACH,YAAY,YAAA,CACd,CAAA,CACF,GACF,CAAA,CACF","file":"watch.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, CSSProperties } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the Watch loader component.\n * \n * The Watch loader displays a watch-like circular animation with moving hands.\n * \n * @interface WatchProps\n */\ninterface WatchProps {\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 /** \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 radius?: string | number\n}\n\nexport const Watch: FunctionComponent<WatchProps> = ({\n height = 80,\n width = 80,\n radius = 48,\n color = DEFAULT_COLOR,\n ariaLabel = 'watch-loading',\n wrapperStyle,\n wrapperClass,\n visible = true,\n}) => (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n data-testid=\"watch-loading\"\n aria-label={ariaLabel}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n width={width}\n height={height}\n version=\"1.1\"\n id=\"L2\"\n xmlns={SVG_NAMESPACE}\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enableBackground=\"new 0 0 100 100\"\n xmlSpace=\"preserve\"\n data-testid=\"watch-svg\"\n >\n <circle\n fill=\"none\"\n stroke={color}\n strokeWidth=\"4\"\n strokeMiterlimit=\"10\"\n cx=\"50\"\n cy=\"50\"\n r={radius}\n />\n <line\n fill=\"none\"\n strokeLinecap=\"round\"\n stroke={color}\n strokeWidth=\"4\"\n strokeMiterlimit=\"10\"\n x1=\"50\"\n y1=\"50\"\n x2=\"85\"\n y2=\"50.5\"\n >\n <animateTransform\n attributeName=\"transform\"\n dur=\"2s\"\n type=\"rotate\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\"\n />\n </line>\n <line\n fill=\"none\"\n strokeLinecap=\"round\"\n stroke={color}\n strokeWidth=\"4\"\n strokeMiterlimit=\"10\"\n x1=\"50\"\n y1=\"50\"\n x2=\"49.5\"\n y2=\"74\"\n >\n <animateTransform\n attributeName=\"transform\"\n dur=\"15s\"\n type=\"rotate\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\"\n />\n </line>\n </svg>\n </SvgWrapper>\n)\n"]}