react-loader-spinner/dist/revolving-dot.cjs.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/shared/constants.ts","../src/loader/revolving-dot.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","RevolvingDot","radius","strokeWidth","color","secondaryColor","ariaLabel","wrapperStyle","wrapperClass","visible","jsx","jsxs"],"mappings":"wMAEO,IAAMA,CAAAA,CAAgB,SAAA,CAEhBC,CAAAA,CAA6B,CACxC,YAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCLO,IAAMC,EAAaC,kBAAAA,CAAO,GAAA;AAAA,WAAA,EACpBC,CAAAA,EAAUA,CAAAA,CAAM,QAAA,CAAW,MAAA,CAAS,MAAO,CAAA;ACHjD,CAAA,CAAA,IAAMC,CAAAA,CAAgB,4BAAA,CCyCtB,IAAMC,CAAAA,CAAqD,CAAC,CACjE,OAAAC,CAAAA,CAAS,EAAA,CACT,WAAA,CAAAC,CAAAA,CAAc,CAAA,CACd,KAAA,CAAAC,CAAAA,CAAQT,CAAAA,CACR,eAAAU,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,uBAAA,CACZ,YAAA,CAAAC,CAAAA,CACA,YAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,IACZ,CAAA,GACEC,cAAAA,CAACb,CAAAA,CAAA,CACC,KAAA,CAAOU,CAAAA,CACP,QAAA,CAAUE,CAAAA,CACV,SAAA,CAAWD,CAAAA,CACX,YAAA,CAAYF,CAAAA,CACZ,aAAA,CAAY,uBAAA,CACX,GAAGV,CAAAA,CAEJ,QAAA,CAAAe,eAAAA,CAAC,KAAA,CAAA,CACC,OAAA,CAAQ,KAAA,CACR,KAAA,CAAO,CAAA,KAAA,EAAQT,CAAM,CAAA,OAAA,CAAA,CACrB,MAAA,CAAQ,CAAA,KAAA,EAAQA,CAAM,CAAA,OAAA,CAAA,CACtB,KAAA,CAAOF,CAAAA,CACP,CAAA,CAAE,MACF,CAAA,CAAE,KAAA,CACF,aAAA,CAAY,mBAAA,CAEZ,QAAA,CAAA,CAAAU,cAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAK,MAAA,CACL,MAAA,CAAQL,CAAAA,EAAkBD,CAAAA,CAC1B,WAAA,CAAaD,CAAAA,CACb,EAAA,CAAI,CAAA,KAAA,EAAQD,CAAM,CAAA,QAAA,CAAA,CAClB,EAAA,CAAI,CAAA,KAAA,EAAQA,CAAM,CAAA,QAAA,CAAA,CAClBA,CAAAA,CACA,KAAA,CAAO,CAAE,QAAS,EAAI,CAAA,CACxB,CAAA,CACAQ,cAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAMN,CAAAA,CACN,MAAA,CAAQA,EACR,WAAA,CAAY,GAAA,CACZ,EAAA,CAAI,CAAA,KAAA,EAAQF,CAAM,CAAA,QAAA,CAAA,CAClB,EAAA,CAAI,CAAA,KAAA,EAAQA,CAAM,CAAA,OAAA,CAAA,CAClB,CAAA,CAAG,CAAA,KAAA,EAAQA,CAAM,CAAA,KAAA,CAAA,CACjB,KAAA,CAAO,CAAE,eAAA,CAAiB,SAAU,CAAA,CAEpC,QAAA,CAAAQ,cAAAA,CAAC,kBAAA,CAAA,CACC,aAAA,CAAc,WAAA,CACd,GAAA,CAAI,IAAA,CACJ,KAAK,QAAA,CACL,IAAA,CAAK,GAAA,CACL,EAAA,CAAG,KAAA,CACH,WAAA,CAAY,YAAA,CACd,CAAA,CACF,GACF,CAAA,CACF","file":"revolving-dot.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","import styled from 'styled-components'\n\nexport const SvgWrapper = styled.div<{ $visible: boolean }>`\n  display: ${props => (props.$visible ? 'flex' : 'none')};\n`\n","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent, ReactElement, CSSProperties } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the RevolvingDot loader component.\n * \n * The RevolvingDot loader shows a dot that revolves around a circular path.\n * \n * @interface RevolvingDotProps\n */\ninterface RevolvingDotProps {\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?: number\n  secondaryColor?: string\n  strokeWidth?: number\n}\n\nexport const RevolvingDot: FunctionComponent<RevolvingDotProps> = ({\n  radius = 45,\n  strokeWidth = 5,\n  color = DEFAULT_COLOR,\n  secondaryColor,\n  ariaLabel = 'revolving-dot-loading',\n  wrapperStyle,\n  wrapperClass,\n  visible = true,\n}): ReactElement => (\n  <SvgWrapper\n    style={wrapperStyle}\n    $visible={visible}\n    className={wrapperClass}\n    aria-label={ariaLabel}\n    data-testid=\"revolving-dot-loading\"\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      version=\"1.1\"\n      width={`calc(${radius} * 2.5)`}\n      height={`calc(${radius} * 2.5)`}\n      xmlns={SVG_NAMESPACE}\n      x=\"0px\"\n      y=\"0px\"\n      data-testid=\"revolving-dot-svg\"\n    >\n      <circle\n        fill=\"none\"\n        stroke={secondaryColor || color}\n        strokeWidth={strokeWidth}\n        cx={`calc(${radius} * 1.28)`}\n        cy={`calc(${radius} * 1.28)`}\n        r={radius}\n        style={{ opacity: 0.5 }}\n      />\n      <circle\n        fill={color}\n        stroke={color}\n        strokeWidth=\"3\"\n        cx={`calc(${radius} * 1.28)`}\n        cy={`calc(${radius} / 3.5)`}\n        r={`calc(${radius} / 5)`}\n        style={{ transformOrigin: '50% 50%' }}\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          dur=\"2s\"\n          type=\"rotate\"\n          from=\"0\"\n          to=\"360\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </svg>\n  </SvgWrapper>\n)\n"]}