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 • 5.74 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/loader/hearts.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","Hearts","height","width","color","ariaLabel","wrapperStyle","wrapperClass","visible","jsx","jsxs"],"mappings":"0EAEO,IAAMA,CAAAA,CAAgB,SAAA,CAEhBC,CAAAA,CAA6B,CACxC,YAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCLO,IAAMC,EAAaC,CAAAA,CAAO,GAAA;AAAA,WAAA,EACpBC,CAAAA,EAAUA,CAAAA,CAAM,QAAA,CAAW,MAAA,CAAS,MAAO,CAAA;EC2BjD,IAAMC,CAAAA,CAAyC,CAAC,CACrD,MAAA,CAAAC,CAAAA,CAAS,EAAA,CACT,KAAA,CAAAC,EAAQ,EAAA,CACR,KAAA,CAAAC,CAAAA,CAAQR,CAAAA,CACR,SAAA,CAAAS,CAAAA,CAAY,gBAAA,CACZ,YAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CAAU,IACZ,IACEC,GAAAA,CAACX,CAAAA,CAAA,CACC,KAAA,CAAOQ,CAAAA,CACP,QAAA,CAAUE,CAAAA,CACV,SAAA,CAAWD,CAAAA,CACX,aAAA,CAAY,gBAAA,CACZ,YAAA,CAAYF,CAAAA,CACX,GAAGR,CAAAA,CAEJ,QAAA,CAAAa,IAAAA,CAAC,KAAA,CAAA,CACC,KAAA,CAAOP,CAAAA,CACP,MAAA,CAAQD,CAAAA,CACR,OAAA,CAAQ,YAAA,CACR,KAAA,CAAM,4BAAA,CACN,IAAA,CAAME,CAAAA,CACN,aAAA,CAAY,YAAA,CAEZ,UAAAK,GAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,wOAAA,CACF,aAAA,CAAc,cAAA,CACd,IAAA,CAAK,GAAA,CACL,EAAA,CAAG,IAAA,CAEH,QAAA,CAAAA,GAAAA,CAAC,SAAA,CAAA,CACC,aAAA,CAAc,cAAA,CACd,KAAA,CAAM,IAAA,CACN,GAAA,CAAI,MAAA,CACJ,MAAA,CAAO,WAAA,CACP,QAAA,CAAS,QAAA,CACT,WAAA,CAAY,YAAA,CACd,CAAA,CACF,CAAA,CACAA,GAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,kPACF,aAAA,CAAc,cAAA,CACd,IAAA,CAAK,GAAA,CACL,EAAA,CAAG,IAAA,CAEH,QAAA,CAAAA,GAAAA,CAAC,SAAA,CAAA,CACC,aAAA,CAAc,cAAA,CACd,KAAA,CAAM,MAAA,CACN,GAAA,CAAI,MAAA,CACJ,MAAA,CAAO,WAAA,CACP,QAAA,CAAS,QAAA,CACT,WAAA,CAAY,YAAA,CACd,CAAA,CACF,CAAA,CACAA,GAAAA,CAAC,MAAA,CAAA,CAAK,CAAA,CAAE,mOAAA,CAAoO,CAAA,CAAA,CAC9O,CAAA,CACF","file":"hearts.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","import styled from 'styled-components'\n\nexport const SvgWrapper = styled.div<{ $visible: boolean }>`\n display: ${props => (props.$visible ? 'flex' : 'none')};\n`\n","import { FunctionComponent, CSSProperties } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\n\n/**\n * Props for the Hearts loader component.\n * \n * The Hearts loader displays three animated heart shapes that pulsate and fade\n * in and out with different timing to create a romantic loading animation.\n * Each heart scales and changes opacity in a staggered pattern.\n * \n * @interface HeartsProps\n */\ninterface HeartsProps {\n /** Height of the SVG (number interpreted as px). Defaults to 80. */\n height?: string | number\n /** Width of the SVG (number interpreted as px). Defaults to 80. */\n width?: string | number\n /** Primary color applied to the hearts. Defaults to DEFAULT_COLOR. */\n color?: string\n /** Accessible label announced to screen readers. Defaults to 'hearts-loading'. */\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 Hearts: FunctionComponent<HeartsProps> = ({\n height = 80,\n width = 80,\n color = DEFAULT_COLOR,\n ariaLabel = 'hearts-loading',\n wrapperStyle,\n wrapperClass,\n visible = true,\n}) => (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n data-testid=\"hearts-loading\"\n aria-label={ariaLabel}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n width={width}\n height={height}\n viewBox=\"0 0 140 64\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill={color}\n data-testid=\"hearts-svg\"\n >\n <path\n d=\"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z\"\n attributeName=\"fill-opacity\"\n from=\"0\"\n to=\".5\"\n >\n <animate\n attributeName=\"fill-opacity\"\n begin=\"0s\"\n dur=\"1.4s\"\n values=\"0.5;1;0.5\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </path>\n <path\n d=\"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z\"\n attributeName=\"fill-opacity\"\n from=\"0\"\n to=\".5\"\n >\n <animate\n attributeName=\"fill-opacity\"\n begin=\"0.7s\"\n dur=\"1.4s\"\n values=\"0.5;1;0.5\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </path>\n <path d=\"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z\" />\n </svg>\n </SvgWrapper>\n)\n"]}