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.27 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/magnifying-glass.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","MagnifyingGlass","visible","height","width","wrapperClass","wrapperStyle","ariaLabel","glassColor","color","jsx","jsxs"],"mappings":"yDAIO,IAAMA,CAAAA,CAA6B,CACxC,WAAA,CAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,4BAAA,CCsCtB,IAAMC,CAAAA,CAA2D,CAAC,CACvE,OAAA,CAAAC,CAAAA,CAAU,IAAA,CACV,MAAA,CAAAC,CAAAA,CAAS,IAAA,CACT,KAAA,CAAAC,CAAAA,CAAQ,IAAA,CACR,YAAA,CAAAC,CAAAA,CAAe,EAAA,CACf,YAAA,CAAAC,CAAAA,CAAe,EAAC,CAChB,SAAA,CAAAC,CAAAA,CAAY,0BAAA,CACZ,UAAA,CAAAC,CAAAA,CAAa,SAAA,CACb,KAAA,CAAAC,CAAAA,CAAQ,SACV,CAAA,GACUP,CAAAA,CACNQ,cAAAA,CAAC,KAAA,CAAA,CACC,KAAA,CAAON,CAAAA,CACP,MAAA,CAAQD,CAAAA,CACR,KAAA,CAAOH,CAAAA,CACP,OAAA,CAAQ,aAAA,CACR,mBAAA,CAAoB,UAAA,CACpB,SAAA,CAAWK,EACX,KAAA,CAAOC,CAAAA,CACP,YAAA,CAAYC,CAAAA,CACZ,aAAA,CAAY,sBAAA,CACX,GAAGR,CAAAA,CAEJ,QAAA,CAAAW,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,kBAAA,CACX,QAAA,CAAAA,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,aAAA,CACX,QAAA,CAAAA,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,oBAAA,CACX,QAAA,CAAAC,eAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,wBAAA,CACX,QAAA,CAAA,CAAAD,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,YACd,IAAA,CAAK,WAAA,CACL,QAAA,CAAS,QAAA,CACT,MAAA,CAAO,6BAAA,CACP,QAAA,CAAS,eAAA,CACT,GAAA,CAAI,IAAA,CACJ,KAAA,CAAM,IAAA,CACN,WAAA,CAAY,YAAA,CACb,CAAA,CACDA,cAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,wSAAA,CACF,IAAA,CAAMF,CAAAA,CACP,CAAA,CACDE,cAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,8uBAAA,CACF,IAAA,CAAMD,CAAAA,CACP,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CACF,CAAA,CACF,EACF,CAAA,CAvCgB","file":"magnifying-glass.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_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the MagnifyingGlass loader component.\n * \n * The MagnifyingGlass loader displays a magnifying glass with a rotating animation.\n * \n * @interface MagnifyingGlassProps\n */\ninterface MagnifyingGlassProps {\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 glassColor?: string\n}\n\nexport const MagnifyingGlass: FunctionComponent<MagnifyingGlassProps> = ({\n visible = true,\n height = '80',\n width = '80',\n wrapperClass = '',\n wrapperStyle = {},\n ariaLabel = 'magnifying-glass-loading',\n glassColor = '#c0efff',\n color = '#e15b64',\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=\"magnifying-glass-svg\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <g transform=\"translate(50,50)\">\n <g transform=\"scale(0.82)\">\n <g transform=\"translate(-50,-50)\">\n <g transform=\"translate(16.3636 -20)\">\n <animateTransform\n attributeName=\"transform\"\n type=\"translate\"\n calcMode=\"linear\"\n values=\"-20 -20;20 -20;0 20;-20 -20\"\n keyTimes=\"0;0.33;0.66;1\"\n dur=\"1s\"\n begin=\"0s\"\n repeatCount=\"indefinite\"\n ></animateTransform>\n <path\n d=\"M44.19,26.158c-4.817,0-9.345,1.876-12.751,5.282c-3.406,3.406-5.282,7.934-5.282,12.751 c0,4.817,1.876,9.345,5.282,12.751c3.406,3.406,7.934,5.282,12.751,5.282s9.345-1.876,12.751-5.282 c3.406-3.406,5.282-7.934,5.282-12.751c0-4.817-1.876-9.345-5.282-12.751C53.536,28.033,49.007,26.158,44.19,26.158z\"\n fill={glassColor}\n ></path>\n <path\n d=\"M78.712,72.492L67.593,61.373l-3.475-3.475c1.621-2.352,2.779-4.926,3.475-7.596c1.044-4.008,1.044-8.23,0-12.238 c-1.048-4.022-3.146-7.827-6.297-10.979C56.572,22.362,50.381,20,44.19,20C38,20,31.809,22.362,27.085,27.085 c-9.447,9.447-9.447,24.763,0,34.21C31.809,66.019,38,68.381,44.19,68.381c4.798,0,9.593-1.425,13.708-4.262l9.695,9.695 l4.899,4.899C73.351,79.571,74.476,80,75.602,80s2.251-0.429,3.11-1.288C80.429,76.994,80.429,74.209,78.712,72.492z M56.942,56.942 c-3.406,3.406-7.934,5.282-12.751,5.282s-9.345-1.876-12.751-5.282c-3.406-3.406-5.282-7.934-5.282-12.751 c0-4.817,1.876-9.345,5.282-12.751c3.406-3.406,7.934-5.282,12.751-5.282c4.817,0,9.345,1.876,12.751,5.282 c3.406,3.406,5.282,7.934,5.282,12.751C62.223,49.007,60.347,53.536,56.942,56.942z\"\n fill={color}\n ></path>\n </g>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n"]}