react-loader-spinner/dist/circles-with-bar.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/circles-with-bar.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","CirclesWithBar","wrapperStyle","visible","wrapperClass","height","width","color","outerCircleColor","innerCircleColor","barColor","ariaLabel","jsx","jsxs"],"mappings":"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","file":"circles-with-bar.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 } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE, Style } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the CirclesWithBar loader component.\n * \n * The CirclesWithBar loader displays two circles rotating in opposite directions\n * with animated wave bars inside. The outer circle, inner circle, and bar colors\n * can be customized independently for a dynamic loading animation.\n * \n * @interface CirclesWithBarProps\n */\ninterface CirclesWithBarProps {\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 default elements. Defaults to DEFAULT_COLOR. */\n  color?: string\n  /** Color of the outer rotating circle. Overrides default color. */\n  outerCircleColor?: string\n  /** Color of the inner rotating circle. Overrides default color. */\n  innerCircleColor?: string\n  /** Color of the animated wave bars. Overrides default color. */\n  barColor?: string\n  /** Accessible label announced to screen readers. Defaults to 'circles-with-bar-loading'. */\n  ariaLabel?: string\n  /** Inline style object applied to the wrapper element. */\n  wrapperStyle?: Style\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 solid colors.\n   * When 2 or more colors are supplied a gradient will be applied to the elements.\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\n/**\n * @description contains two circles rotating in opposite direction\n * and a wave bars. outer circle, inner circle and bar\n * color can be set from props.\n */\nexport const CirclesWithBar: FunctionComponent<CirclesWithBarProps> = ({\n  wrapperStyle = {},\n  visible = true,\n  wrapperClass = '',\n  height = 100,\n  width = 100,\n  color = DEFAULT_COLOR,\n  outerCircleColor,\n  innerCircleColor,\n  barColor,\n  ariaLabel = 'circles-with-bar-loading',\n}) => {\n  return (\n    <SvgWrapper\n      style={wrapperStyle}\n      $visible={visible}\n      className={wrapperClass}\n      aria-label={ariaLabel}\n      {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n      data-testid=\"circles-with-bar-wrapper\"\n    >\n      <svg\n        version=\"1.1\"\n        id=\"L1\"\n        xmlns={SVG_NAMESPACE}\n        x=\"0px\"\n        y=\"0px\"\n        height={`${height}`}\n        width={`${width}`}\n        viewBox=\"0 0 100 100\"\n        enableBackground=\"new 0 0 100 100\"\n        xmlSpace=\"preserve\"\n        data-testid=\"circles-with-bar-svg\"\n      >\n        <title>circles-with-bar-loading</title>\n        <desc>Animated representation of circles with bar</desc>\n        <circle\n          fill=\"none\"\n          stroke={`${outerCircleColor || color}`} // color\n          strokeWidth=\"6\"\n          strokeMiterlimit=\"15\"\n          strokeDasharray=\"14.2472,14.2472\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"47\"\n        >\n          <animateTransform\n            attributeName=\"transform\"\n            attributeType=\"XML\"\n            type=\"rotate\"\n            dur=\"5s\"\n            from=\"0 50 50\"\n            to=\"360 50 50\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n        <circle\n          fill=\"none\"\n          stroke={`${innerCircleColor || color}`}\n          strokeWidth=\"1\"\n          strokeMiterlimit=\"10\"\n          strokeDasharray=\"10,10\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"39\"\n        >\n          <animateTransform\n            attributeName=\"transform\"\n            attributeType=\"XML\"\n            type=\"rotate\"\n            dur=\"5s\"\n            from=\"0 50 50\"\n            to=\"-360 50 50\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n        <g fill={`${barColor || color}`} data-testid=\"circles-with-bar-svg-bar\">\n          <rect x=\"30\" y=\"35\" width=\"5\" height=\"30\">\n            <animateTransform\n              attributeName=\"transform\"\n              dur=\"1s\"\n              type=\"translate\"\n              values=\"0 5 ; 0 -5; 0 5\"\n              repeatCount=\"indefinite\"\n              begin=\"0.1\"\n            />\n          </rect>\n          <rect x=\"40\" y=\"35\" width=\"5\" height=\"30\">\n            <animateTransform\n              attributeName=\"transform\"\n              dur=\"1s\"\n              type=\"translate\"\n              values=\"0 5 ; 0 -5; 0 5\"\n              repeatCount=\"indefinite\"\n              begin=\"0.2\"\n            />\n          </rect>\n          <rect x=\"50\" y=\"35\" width=\"5\" height=\"30\">\n            <animateTransform\n              attributeName=\"transform\"\n              dur=\"1s\"\n              type=\"translate\"\n              values=\"0 5 ; 0 -5; 0 5\"\n              repeatCount=\"indefinite\"\n              begin=\"0.3\"\n            />\n          </rect>\n          <rect x=\"60\" y=\"35\" width=\"5\" height=\"30\">\n            <animateTransform\n              attributeName=\"transform\"\n              dur=\"1s\"\n              type=\"translate\"\n              values=\"0 5 ; 0 -5; 0 5\"\n              repeatCount=\"indefinite\"\n              begin=\"0.4\"\n            />\n          </rect>\n          <rect x=\"70\" y=\"35\" width=\"5\" height=\"30\">\n            <animateTransform\n              attributeName=\"transform\"\n              dur=\"1s\"\n              type=\"translate\"\n              values=\"0 5 ; 0 -5; 0 5\"\n              repeatCount=\"indefinite\"\n              begin=\"0.5\"\n            />\n          </rect>\n        </g>\n      </svg>\n    </SvgWrapper>\n  )\n}\n"]}