react-loader-spinner/dist/mutating-dots.mjs.map

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/loader/mutating-dots.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","MutatingDots","height","width","radius","color","secondaryColor","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;ECoCjD,IAAMC,CAAAA,CAAqD,CAAC,CACjE,MAAA,CAAAC,EAAS,EAAA,CACT,KAAA,CAAAC,EAAQ,EAAA,CACR,MAAA,CAAAC,EAAS,IAAA,CACT,KAAA,CAAAC,EAAQT,CAAAA,CACR,cAAA,CAAAU,EAAiBV,CAAAA,CACjB,SAAA,CAAAW,EAAY,uBAAA,CACZ,YAAA,CAAAC,EACA,YAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,IACZ,IACEC,GAAAA,CAACb,CAAAA,CAAA,CACC,KAAA,CAAOU,CAAAA,CACP,SAAUE,CAAAA,CACV,SAAA,CAAWD,EACX,aAAA,CAAY,uBAAA,CACZ,aAAYF,CAAAA,CACX,GAAGV,EAEJ,QAAA,CAAAe,IAAAA,CAAC,OACC,EAAA,CAAG,YAAA,CACH,MAAOT,CAAAA,CACP,MAAA,CAAQD,EACR,aAAA,CAAY,mBAAA,CAEZ,UAAAU,IAAAA,CAAC,QAAA,CAAA,CAAO,GAAG,WAAA,CACT,QAAA,CAAA,CAAAD,IAAC,gBAAA,CAAA,CAAe,EAAA,CAAG,gBAAgB,YAAA,CAAa,GAAA,CAAI,OAAO,MAAA,CAAO,CAAA,CAClEA,IAAC,eAAA,CAAA,CACC,EAAA,CAAG,OACH,IAAA,CAAK,QAAA,CACL,OAAO,8CAAA,CACP,MAAA,CAAO,MACT,CAAA,CACAA,GAAAA,CAAC,eAAY,EAAA,CAAG,eAAA,CAAgB,IAAI,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,CAAA,CAC5D,CAAA,CACAC,KAAC,GAAA,CAAA,CAAE,MAAA,CAAO,kBACR,QAAA,CAAA,CAAAD,GAAAA,CAAC,oBACC,EAAA,CAAG,UAAA,CACH,cAAc,WAAA,CACd,aAAA,CAAc,MACd,IAAA,CAAK,QAAA,CACL,KAAK,SAAA,CACL,EAAA,CAAG,YACH,GAAA,CAAI,MAAA,CACJ,YAAY,YAAA,CACd,CAAA,CACAA,IAAC,QAAA,CAAA,CAAO,EAAA,CAAG,MAAM,EAAA,CAAG,IAAA,CAAK,EAAGP,CAAAA,CAAQ,IAAA,CAAMC,EACxC,QAAA,CAAAM,GAAAA,CAAC,WACC,EAAA,CAAG,QAAA,CACH,cAAc,KAAA,CACd,aAAA,CAAc,KACd,GAAA,CAAI,MAAA,CACJ,MAAM,mBAAA,CACN,QAAA,CAAS,SACT,MAAA,CAAO,UAAA,CACP,SAAS,SAAA,CACT,UAAA,CAAW,0CACb,CAAA,CACF,CAAA,CACAA,IAAC,QAAA,CAAA,CAAO,EAAA,CAAG,MAAM,EAAA,CAAG,IAAA,CAAK,EAAGP,CAAAA,CAAQ,IAAA,CAAME,EACxC,QAAA,CAAAK,GAAAA,CAAC,WACC,EAAA,CAAG,QAAA,CACH,cAAc,KAAA,CACd,aAAA,CAAc,KACd,GAAA,CAAI,MAAA,CACJ,MAAM,sBAAA,CACN,QAAA,CAAS,SACT,MAAA,CAAO,UAAA,CACP,SAAS,SAAA,CACT,UAAA,CAAW,0CACb,CAAA,CACF,CAAA,CAAA,CACF,GACF,CAAA,CACF","file":"mutating-dots.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 MutatingDots loader component.\n * \n * The MutatingDots loader shows dots that mutate and change in size and position.\n * \n * @interface MutatingDotsProps\n */\ninterface MutatingDotsProps {\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  secondaryColor?: string\n}\n\nexport const MutatingDots: FunctionComponent<MutatingDotsProps> = ({\n  height = 90,\n  width = 80,\n  radius = 12.5,\n  color = DEFAULT_COLOR,\n  secondaryColor = DEFAULT_COLOR,\n  ariaLabel = 'mutating-dots-loading',\n  wrapperStyle,\n  wrapperClass,\n  visible = true,\n}) => (\n  <SvgWrapper\n    style={wrapperStyle}\n    $visible={visible}\n    className={wrapperClass}\n    data-testid=\"mutating-dots-loading\"\n    aria-label={ariaLabel}\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      id=\"goo-loader\"\n      width={width}\n      height={height}\n      data-testid=\"mutating-dots-svg\"\n    >\n      <filter id=\"fancy-goo\">\n        <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n        <feColorMatrix\n          in=\"blur\"\n          mode=\"matrix\"\n          values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\"\n          result=\"goo\"\n        />\n        <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n      </filter>\n      <g filter=\"url(#fancy-goo)\">\n        <animateTransform\n          id=\"mainAnim\"\n          attributeName=\"transform\"\n          attributeType=\"XML\"\n          type=\"rotate\"\n          from=\"0 50 50\"\n          to=\"359 50 50\"\n          dur=\"1.2s\"\n          repeatCount=\"indefinite\"\n        />\n        <circle cx=\"50%\" cy=\"40\" r={radius} fill={color}>\n          <animate\n            id=\"cAnim1\"\n            attributeType=\"XML\"\n            attributeName=\"cy\"\n            dur=\"0.6s\"\n            begin=\"0;cAnim1.end+0.2s\"\n            calcMode=\"spline\"\n            values=\"40;20;40\"\n            keyTimes=\"0;0.3;1\"\n            keySplines=\"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1\"\n          />\n        </circle>\n        <circle cx=\"50%\" cy=\"60\" r={radius} fill={secondaryColor}>\n          <animate\n            id=\"cAnim2\"\n            attributeType=\"XML\"\n            attributeName=\"cy\"\n            dur=\"0.6s\"\n            begin=\"0.4s;cAnim2.end+0.2s\"\n            calcMode=\"spline\"\n            values=\"60;80;60\"\n            keyTimes=\"0;0.3;1\"\n            keySplines=\"0.09, 0.45, 0.16, 1;0.09, 0.45, 0.16, 1\"\n          />\n        </circle>\n      </g>\n    </svg>\n  </SvgWrapper>\n)\n"]}