react-loader-spinner/dist/ball-triangle.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/shared/constants.ts","../src/loader/ball-triangle.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","BallTriangle","height","width","radius","color","ariaLabel","wrapperClass","wrapperStyle","visible","jsx","jsxs"],"mappings":"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","file":"ball-triangle.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","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 BallTriangle loader component.\n * \n * The BallTriangle loader displays three animated balls positioned at the corners\n * of a triangle. Each ball moves in a circular path, creating a dynamic triangular\n * loading animation with smooth rotation and scaling effects.\n * \n * @interface BallTriangleProps\n */\ninterface BallTriangleProps {\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 balls. Defaults to DEFAULT_COLOR. */\n  color?: string\n  /** Radius of each ball in the triangle. Defaults to 5. */\n  radius?: string | number\n  /** Accessible label announced to screen readers. Defaults to 'ball-triangle-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 BallTriangle: FunctionComponent<BallTriangleProps> = ({\n  height = 100,\n  width = 100,\n  radius = 5,\n  color = DEFAULT_COLOR,\n  ariaLabel = 'ball-triangle-loading',\n  wrapperClass,\n  wrapperStyle,\n  visible = true,\n}): ReactElement => (\n  <SvgWrapper\n    style={{ ...wrapperStyle }}\n    $visible={visible}\n    className={wrapperClass}\n    data-testid=\"ball-triangle-loading\"\n    aria-label={ariaLabel}\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      height={height}\n      width={width}\n      stroke={color}\n      viewBox=\"0 0 57 57\"\n      xmlns={SVG_NAMESPACE}\n      data-testid=\"ball-triangle-svg\"\n    >\n      <title>Ball Triangle</title>\n      <desc>Animated representation of three balls</desc>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <g transform=\"translate(1 1)\" strokeWidth=\"2\">\n          <circle cx=\"5\" cy=\"50\" r={radius}>\n            <animate\n              attributeName=\"cy\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              values=\"50;5;50;50\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n            <animate\n              attributeName=\"cx\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              values=\"5;27;49;5\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n          <circle cx=\"27\" cy=\"5\" r={radius}>\n            <animate\n              attributeName=\"cy\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              from=\"5\"\n              to=\"5\"\n              values=\"5;50;50;5\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n            <animate\n              attributeName=\"cx\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              from=\"27\"\n              to=\"27\"\n              values=\"27;49;5;27\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n          <circle cx=\"49\" cy=\"50\" r={radius}>\n            <animate\n              attributeName=\"cy\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              values=\"50;50;5;50\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n            <animate\n              attributeName=\"cx\"\n              from=\"49\"\n              to=\"49\"\n              begin=\"0s\"\n              dur=\"2.2s\"\n              values=\"49;5;27;49\"\n              calcMode=\"linear\"\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n        </g>\n      </g>\n    </svg>\n  </SvgWrapper>\n)\n"]}