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.85 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/vortex.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","Vortex","visible","height","width","ariaLabel","wrapperStyle","wrapperClass","colors","jsx","jsxs"],"mappings":"yCAIO,IAAMA,EAA6B,CACxC,WAAA,CAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,4BAAA,KCqChBC,CAAAA,CAAyC,CAAC,CACrD,OAAA,CAAAC,EAAU,IAAA,CACV,MAAA,CAAAC,EAAS,IAAA,CACT,KAAA,CAAAC,EAAQ,IAAA,CACR,SAAA,CAAAC,CAAAA,CAAY,gBAAA,CACZ,aAAAC,CAAAA,CACA,YAAA,CAAAC,EACA,MAAA,CAAAC,CAAAA,CAAS,CAAC,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,SAAA,CAAW,UAAW,SAAS,CAC5E,CAAA,GACUN,CAAAA,CACNO,IAAC,KAAA,CAAA,CACC,MAAA,CAAQN,CAAAA,CACR,KAAA,CAAOC,EACP,KAAA,CAAOJ,CAAAA,CACP,QAAQ,aAAA,CACR,mBAAA,CAAoB,WACpB,aAAA,CAAY,YAAA,CACZ,YAAA,CAAYK,CAAAA,CACZ,MAAOC,CAAAA,CACP,SAAA,CAAWC,EACV,GAAGR,CAAAA,CAEJ,SAAAU,GAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,kBAAA,CACX,SAAAA,GAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,YAAA,CACX,QAAA,CAAAA,IAAC,GAAA,CAAA,CAAE,SAAA,CAAU,oBAAA,CACX,QAAA,CAAAC,KAAC,GAAA,CAAA,CAAE,SAAA,CAAU,uBAAA,CACX,QAAA,CAAA,CAAAD,IAAC,kBAAA,CAAA,CACC,aAAA,CAAc,WAAA,CACd,IAAA,CAAK,SACL,WAAA,CAAY,YAAA,CACZ,OAAO,mBAAA,CACP,QAAA,CAAS,MACT,GAAA,CAAI,GAAA,CACJ,UAAA,CAAW,iBAAA,CACX,SAAS,QAAA,CACV,CAAA,CACDA,IAAC,MAAA,CAAA,CACC,IAAA,CAAMD,EAAO,CAAC,CAAA,CACd,CAAA,CAAE,yLAAA,CACH,EACDC,GAAAA,CAAC,MAAA,CAAA,CACC,KAAMD,CAAAA,CAAO,CAAC,EACd,CAAA,CAAE,gMAAA,CACH,CAAA,CACDC,GAAAA,CAAC,QACC,IAAA,CAAMD,CAAAA,CAAO,CAAC,CAAA,CACd,EAAE,mMAAA,CACH,CAAA,CACDC,GAAAA,CAAC,MAAA,CAAA,CACC,KAAMD,CAAAA,CAAO,CAAC,EACd,CAAA,CAAE,mMAAA,CACH,EACDC,GAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAMD,CAAAA,CAAO,CAAC,CAAA,CACd,CAAA,CAAE,qMACH,CAAA,CACDC,GAAAA,CAAC,QACC,IAAA,CAAMD,CAAAA,CAAO,CAAC,CAAA,CACd,EAAE,4LAAA,CACH,CAAA,CAAA,CACH,EACF,CAAA,CACF,CAAA,CACF,EACF,CAAA,CAvDgB","file":"vortex.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 { FunctionComponent, CSSProperties } from 'react'\nimport { DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the Vortex loader component.\n * \n * The Vortex loader displays a swirling animation that creates a vortex effect.\n * \n * @interface VortexProps\n */\ninterface VortexProps {\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 /** 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}\n\nexport const Vortex: FunctionComponent<VortexProps> = ({\n visible = true,\n height = '80',\n width = '80',\n ariaLabel = 'vortex-loading',\n wrapperStyle,\n wrapperClass,\n colors = ['#1B5299', '#EF8354', '#DB5461', '#1B5299', '#EF8354', '#DB5461'],\n}) => {\n return !visible ? null : (\n <svg\n height={height}\n width={width}\n xmlns={SVG_NAMESPACE}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n data-testid=\"vortex-svg\"\n aria-label={ariaLabel}\n style={wrapperStyle}\n className={wrapperClass}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <g transform=\"translate(50,50)\">\n <g transform=\"scale(0.7)\">\n <g transform=\"translate(-50,-50)\">\n <g transform=\"rotate(137.831 50 50)\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n repeatCount=\"indefinite\"\n values=\"360 50 50;0 50 50\"\n keyTimes=\"0;1\"\n dur=\"1\"\n keySplines=\"0.5 0.5 0.5 0.5\"\n calcMode=\"spline\"\n ></animateTransform>\n <path\n fill={colors[0]}\n d=\"M30.4,9.7c-7.4,10.9-11.8,23.8-12.3,37.9c0.2,1,0.5,1.9,0.7,2.8c1.4-5.2,3.4-10.3,6.2-15.1 c2.6-4.4,5.6-8.4,9-12c0.7-0.7,1.4-1.4,2.1-2.1c7.4-7,16.4-12,26-14.6C51.5,3.6,40.2,4.9,30.4,9.7z\"\n ></path>\n <path\n fill={colors[1]}\n d=\"M24.8,64.2c-2.6-4.4-4.5-9.1-5.9-13.8c-0.3-0.9-0.5-1.9-0.7-2.8c-2.4-9.9-2.2-20.2,0.4-29.8 C10.6,25.5,6,36,5.3,46.8C11,58.6,20,68.9,31.9,76.3c0.9,0.3,1.9,0.5,2.8,0.8C31,73.3,27.6,69,24.8,64.2z\"\n ></path>\n <path\n fill={colors[2]}\n d=\"M49.6,78.9c-5.1,0-10.1-0.6-14.9-1.8c-1-0.2-1.9-0.5-2.8-0.8c-9.8-2.9-18.5-8.2-25.6-15.2 c2.8,10.8,9.5,20,18.5,26c13.1,0.9,26.6-1.7,38.9-8.3c0.7-0.7,1.4-1.4,2.1-2.1C60.7,78.2,55.3,78.9,49.6,78.9z\"\n ></path>\n <path\n fill={colors[3]}\n d=\"M81.1,49.6c-1.4,5.2-3.4,10.3-6.2,15.1c-2.6,4.4-5.6,8.4-9,12c-0.7,0.7-1.4,1.4-2.1,2.1 c-7.4,7-16.4,12-26,14.6c10.7,3,22.1,1.7,31.8-3.1c7.4-10.9,11.8-23.8,12.3-37.9C81.6,51.5,81.4,50.6,81.1,49.6z\"\n ></path>\n <path\n fill={colors[4]}\n d=\"M75.2,12.9c-13.1-0.9-26.6,1.7-38.9,8.3c-0.7,0.7-1.4,1.4-2.1,2.1c5.2-1.4,10.6-2.2,16.2-2.2 c5.1,0,10.1,0.6,14.9,1.8c1,0.2,1.9,0.5,2.8,0.8c9.8,2.9,18.5,8.2,25.6,15.2C90.9,28.1,84.2,18.9,75.2,12.9z\"\n ></path>\n <path\n fill={colors[5]}\n d=\"M94.7,53.2C89,41.4,80,31.1,68.1,23.7c-0.9-0.3-1.9-0.5-2.8-0.8c3.8,3.8,7.2,8.1,10,13 c2.6,4.4,4.5,9.1,5.9,13.8c0.3,0.9,0.5,1.9,0.7,2.8c2.4,9.9,2.2,20.2-0.4,29.8C89.4,74.5,94,64,94.7,53.2z\"\n ></path>\n </g>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n"]}