react-loader-spinner/dist/circular-progress.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/circular-progress.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","CircularProgress","height","width","color","secondaryColor","ariaLabel","wrapperStyle","wrapperClass","visible","strokeWidth","animationDuration","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;ECHjD,IAAMC,CAAAA,CAAgB,6BC8CtB,IAAMC,CAAAA,CAA6D,CAAC,CACzE,MAAA,CAAAC,EAAS,KAAA,CACT,KAAA,CAAAC,EAAQ,KAAA,CACR,KAAA,CAAAC,CAAAA,CAAQT,CAAAA,CACR,cAAA,CAAAU,CAAAA,CACA,UAAAC,CAAAA,CAAY,2BAAA,CACZ,aAAAC,CAAAA,CAAe,GACf,YAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,IAAA,CACV,YAAAC,CAAAA,CAAc,CAAA,CACd,kBAAAC,CAAAA,CAAoB,CACtB,IACEC,cAAAA,CAACf,CAAAA,CAAA,CACC,QAAA,CAAUY,CAAAA,CACV,KAAA,CAAO,CAAE,GAAGF,CAAa,EACzB,SAAA,CAAWC,CAAAA,CACX,cAAY,2BAAA,CACZ,YAAA,CAAYF,EACX,GAAGV,CAAAA,CAEJ,SAAAiB,eAAAA,CAAC,KAAA,CAAA,CACC,OAAQ,CAAA,EAAGX,CAAM,GACjB,KAAA,CAAO,CAAA,EAAGC,CAAK,CAAA,CAAA,CACf,IAAA,CAAK,MAAA,CACL,QAAQ,WAAA,CACR,KAAA,CAAOH,EACP,aAAA,CAAY,uBAAA,CACZ,MAAO,CACL,SAAA,CAAW,QAAQW,CAAiB,CAAA,iBAAA,CACtC,EAEA,QAAA,CAAA,CAAAC,cAAAA,CAAC,SAAM,QAAA,CAAA,mBAAA,CAAiB,CAAA,CACxBA,eAAC,MAAA,CAAA,CAAK,QAAA,CAAA,sCAAA,CAAoC,CAAA,CAC1CA,cAAAA,CAAC,OAAA,CAAA,CACE,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA,CAMH,CAAA,CAEAA,cAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAK,OACL,MAAA,CAAQP,CAAAA,EAAkBD,CAAAA,CAC1B,WAAA,CAAaM,CAAAA,CACb,CAAA,CAAE,iDAAA,CACF,OAAA,CAAQ,MACV,CAAA,CAEAE,cAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAMR,CAAAA,CACN,QAAA,CAAS,SAAA,CACT,CAAA,CAAE,oCACF,QAAA,CAAS,SAAA,CACX,CAAA,CAEAQ,cAAAA,CAAC,QACC,IAAA,CAAMR,CAAAA,CACN,CAAA,CAAE,yCAAA,CACJ,GACF,CAAA,CACF","file":"circular-progress.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 CircularProgress loader component.\n * \n * The CircularProgress loader displays a circular progress indicator with customizable\n * stroke width and colors. Features a main circle with optional secondary background circle,\n * animated rotation, and configurable animation duration.\n * \n * @interface CircularProgressProps\n */\ninterface CircularProgressProps {\n  /** Height of the SVG (number interpreted as px). Defaults to '100'. */\n  height?: string | number\n  /** Width of the SVG (number interpreted as px). Defaults to '100'. */\n  width?: string | number\n  /** Primary color applied to the progress circle. Defaults to DEFAULT_COLOR. */\n  color?: string\n  /** Stroke width of the progress circle. Affects the thickness of the circular line. */\n  strokeWidth?: string | number\n  /** Color of the background/secondary circle. Optional background indicator. */\n  secondaryColor?: string\n  /** Duration of the rotation animation in seconds. Controls animation speed. */\n  animationDuration?: string | number\n  /** Accessible label announced to screen readers. Defaults to 'circular-progress-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   * 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 progress circle.\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 CircularProgress: FunctionComponent<CircularProgressProps> = ({\n  height = '100',\n  width = '100',\n  color = DEFAULT_COLOR,\n  secondaryColor,\n  ariaLabel = 'circular-progress-loading',\n  wrapperStyle = {},\n  wrapperClass,\n  visible = true,\n  strokeWidth = 2,\n  animationDuration = 1,\n}): ReactElement => (\n  <SvgWrapper\n    $visible={visible}\n    style={{ ...wrapperStyle }}\n    className={wrapperClass}\n    data-testid=\"circular-progress-loading\"\n    aria-label={ariaLabel}\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      height={`${height}`}\n      width={`${width}`}\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n      xmlns={SVG_NAMESPACE}\n      data-testid=\"circular-progress-svg\"\n      style={{\n        animation: `spin ${animationDuration}s linear infinite`,\n      }}\n    >\n      <title>Circular Progress</title>\n      <desc>Animated circular progress indicator</desc>\n      <style>\n        {`\n          @keyframes spin {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n          }\n        `}\n      </style>\n      {/* Background circle with opacity */}\n      <path\n        fill=\"none\"\n        stroke={secondaryColor || color}\n        strokeWidth={strokeWidth}\n        d=\"M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z\"\n        opacity=\"0.5\"\n      />\n      {/* Inner filled circle */}\n      <path\n        fill={color}\n        fillRule=\"evenodd\"\n        d=\"M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z\"\n        clipRule=\"evenodd\"\n      />\n      {/* Progress arc */}\n      <path\n        fill={color}\n        d=\"M14 8a6 6 0 0 0-6-6V0a8 8 0 0 1 8 8h-2Z\"\n      />\n    </svg>\n  </SvgWrapper>\n)"]}