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.66 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/fidget-spinner.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","FidgetSpinner","width","height","backgroundColor","ballColors","wrapperClass","wrapperStyle","ariaLabel","visible","jsx","jsxs"],"mappings":"yDAEO,IAAMA,EAAgB,SAAA,CAEhBC,CAAAA,CAA6B,CACxC,WAAA,CAAa,KACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,EAAgB,4BAAA,CC8BtB,IAAMC,CAAAA,CAAuD,CAAC,CACnE,KAAA,CAAAC,CAAAA,CAAQ,IAAA,CACR,OAAAC,CAAAA,CAAS,IAAA,CACT,eAAA,CAAAC,CAAAA,CAAkBN,EAClB,UAAA,CAAAO,CAAAA,CAAa,CAAC,SAAA,CAAW,UAAW,SAAS,CAAA,CAC7C,YAAA,CAAAC,CAAAA,CAAe,GACf,YAAA,CAAAC,CAAAA,CAAe,EAAC,CAChB,UAAAC,CAAAA,CAAY,uBAAA,CACZ,OAAA,CAAAC,CAAAA,CAAU,IACZ,CAAA,GACUA,CAAAA,CACNC,cAAAA,CAAC,KAAA,CAAA,CACC,MAAOR,CAAAA,CACP,MAAA,CAAQC,CAAAA,CACR,KAAA,CAAOH,EACP,OAAA,CAAQ,aAAA,CACR,mBAAA,CAAoB,UAAA,CACpB,UAAWM,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACP,YAAA,CAAYC,EACZ,aAAA,CAAY,oBAAA,CACX,GAAGT,CAAAA,CAEJ,SAAAY,eAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,iBAAA,CACX,UAAAD,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,kBAAA,CACX,SAAAA,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,YAAA,CACX,SAAAC,eAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,oBAAA,CACX,UAAAD,cAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,wJAAA,CACF,KAAML,CAAAA,CAAW,CAAC,CAAA,CACnB,CAAA,CACDK,eAAC,MAAA,CAAA,CACC,CAAA,CAAE,uJAAA,CACF,IAAA,CAAML,EAAW,CAAC,CAAA,CACnB,CAAA,CACDK,cAAAA,CAAC,UAAO,EAAA,CAAG,IAAA,CAAK,EAAA,CAAG,IAAA,CAAK,EAAE,KAAA,CAAM,IAAA,CAAML,CAAAA,CAAW,CAAC,EAAG,CAAA,CACrDK,cAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,0lCACF,IAAA,CAAMN,CAAAA,CACP,CAAA,CAAA,CACH,CAAA,CACF,EACF,CAAA,CACAM,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,YACd,IAAA,CAAK,QAAA,CACL,QAAA,CAAS,QAAA,CACT,OAAO,mBAAA,CACP,QAAA,CAAS,KAAA,CACT,GAAA,CAAI,KACJ,KAAA,CAAM,IAAA,CACN,YAAY,YAAA,CACb,CAAA,CAAA,CACH,EACF,CAAA,CA5CgB","file":"fidget-spinner.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","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 { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the FidgetSpinner loader component.\n * \n * The FidgetSpinner loader displays a fidget spinner with rotating animation.\n * \n * @interface FidgetSpinnerProps\n */\ninterface FidgetSpinnerProps {\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 /** Background color of the fidget spinner. Defaults to DEFAULT_COLOR. */\n backgroundColor?: string\n /** Array of colors for the spinner balls. Defaults to ['#fc636b', '#6a67ce', '#ffb900']. */\n ballColors?: 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\nexport const FidgetSpinner: FunctionComponent<FidgetSpinnerProps> = ({\n width = '80',\n height = '80',\n backgroundColor = DEFAULT_COLOR,\n ballColors = ['#fc636b', '#6a67ce', '#ffb900'],\n wrapperClass = '',\n wrapperStyle = {},\n ariaLabel = 'fidget-spinner-loader',\n visible = true,\n}) => {\n return !visible ? null : (\n <svg\n width={width}\n height={height}\n xmlns={SVG_NAMESPACE}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n className={wrapperClass}\n style={wrapperStyle}\n aria-label={ariaLabel}\n data-testid=\"fidget-spinner-svg\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <g transform=\"rotate(6 50 50)\">\n <g transform=\"translate(50 50)\">\n <g transform=\"scale(0.9)\">\n <g transform=\"translate(-50 -58)\">\n <path\n d=\"M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z\"\n fill={ballColors[0]}\n ></path>\n <path\n d=\"M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z\"\n fill={ballColors[1]}\n ></path>\n <circle cx=\"50\" cy=\"27\" r=\"7.4\" fill={ballColors[2]}></circle>\n <path\n d=\"M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z\"\n fill={backgroundColor}\n ></path>\n </g>\n </g>\n </g>\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n calcMode=\"linear\"\n values=\"0 50 50;360 50 50\"\n keyTimes=\"0;1\"\n dur=\"1s\"\n begin=\"0s\"\n repeatCount=\"indefinite\"\n ></animateTransform>\n </g>\n </svg>\n )\n}\n"]}