react-loader-spinner/dist/oval.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/oval.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","RADIUS","getPath","radius","getViewBoxSize","strokeWidth","secondaryStrokeWidth","maxStrokeWidth","startingPoint","endpoint","Oval","height","width","color","secondaryColor","ariaLabel","wrapperStyle","wrapperClass","visible","strokeWidthSecondary","animationDuration","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;ECwCxD,IAAMC,CAAAA,CAAS,GAQTC,CAAAA,CAAWC,CAAAA,EACR,CAAC,GAAA,CAAMA,CAAAA,CAAS,iBAAkBA,CAAAA,CAAQA,CAAAA,CAAQA,CAAM,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,CASrEC,CAAAA,CAAiB,CACrBC,CAAAA,CACAC,CAAAA,CACAH,IACW,CACX,IAAMI,EAAiB,IAAA,CAAK,GAAA,CAAIF,EAAaC,CAAoB,CAAA,CAC3DE,EAAgB,CAACL,CAAAA,CAASI,EAAiB,CAAA,CAAI,CAAA,CAC/CE,EAAWN,CAAAA,CAAS,CAAA,CAAII,EAC9B,OAAO,CAACC,EAAeA,CAAAA,CAAeC,CAAAA,CAAUA,CAAQ,CAAA,CAAE,IAAA,CAAK,GAAG,CACpE,CAAA,CAEaC,EAAqC,CAAC,CACjD,OAAAC,CAAAA,CAAS,EAAA,CACT,MAAAC,CAAAA,CAAQ,EAAA,CACR,MAAAC,CAAAA,CAAQjB,CAAAA,CACR,eAAAkB,CAAAA,CAAiBlB,CAAAA,CACjB,UAAAmB,CAAAA,CAAY,cAAA,CACZ,aAAAC,CAAAA,CACA,YAAA,CAAAC,EACA,OAAA,CAAAC,CAAAA,CAAU,KACV,WAAA,CAAAb,CAAAA,CAAc,EACd,oBAAA,CAAAc,CAAAA,CACA,kBAAAC,CAAAA,CAAoB,CACtB,IACEC,GAAAA,CAACvB,CAAAA,CAAA,CACC,KAAA,CAAOkB,CAAAA,CACP,QAAA,CAAUE,EACV,SAAA,CAAWD,CAAAA,CACX,cAAY,cAAA,CACZ,YAAA,CAAYF,EACX,GAAGlB,CAAAA,CAEJ,SAAAwB,GAAAA,CAAC,KAAA,CAAA,CACC,MAAOT,CAAAA,CACP,MAAA,CAAQD,EACR,OAAA,CAASP,CAAAA,CACP,OAAOC,CAAW,CAAA,CAClB,OAAOc,CAAAA,EAAwBd,CAAW,EAC1CJ,CACF,CAAA,CACA,MAAM,4BAAA,CACN,MAAA,CAAQY,EACR,aAAA,CAAY,UAAA,CAEZ,SAAAQ,GAAAA,CAAC,GAAA,CAAA,CAAE,KAAK,MAAA,CAAO,QAAA,CAAS,UACtB,QAAA,CAAAC,IAAAA,CAAC,KACC,SAAA,CAAU,gBAAA,CACV,YAAa,MAAA,CAAOH,CAAAA,EAAwBd,CAAW,CAAA,CACvD,aAAA,CAAY,uBAEZ,QAAA,CAAA,CAAAgB,GAAAA,CAAC,UACC,aAAA,CAAc,IAAA,CACd,GAAG,GAAA,CACH,EAAA,CAAG,IACH,CAAA,CAAGpB,CAAAA,CACH,OAAQa,CAAAA,CACR,WAAA,CAAaT,EACf,CAAA,CACAgB,GAAAA,CAAC,QAAK,CAAA,CAAGnB,CAAAA,CAAQD,CAAM,CAAA,CACrB,QAAA,CAAAoB,IAAC,kBAAA,CAAA,CACC,aAAA,CAAc,YACd,IAAA,CAAK,QAAA,CACL,KAAK,OAAA,CACL,EAAA,CAAG,UACH,GAAA,CAAK,CAAA,EAAGD,CAAiB,CAAA,CAAA,CAAA,CACzB,WAAA,CAAY,aACd,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CACF","file":"oval.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, ReactElement, CSSProperties } from 'react'\nimport { DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SvgWrapper } from '../shared/svg-wrapper'\n\n/**\n * Props for the Oval loader component.\n * \n * The Oval loader displays a circular loading animation with two arcs:\n * a full circle in the background and a quarter circle that rotates to show progress.\n * The animation creates a smooth spinning effect.\n * \n * @interface OvalProps\n */\ninterface OvalProps {\n  /** Height of the SVG (number interpreted as px). Defaults to 80. */\n  height?: string | number\n  /** Width of the SVG (number interpreted as px). Defaults to 80. */\n  width?: string | number\n  /** Primary color applied to the rotating arc. Defaults to DEFAULT_COLOR. */\n  color?: string\n  /** Stroke width of the rotating arc. Defaults to 2. */\n  strokeWidth?: string | number\n  /** Stroke width of the background circle. Uses strokeWidth if not provided. */\n  strokeWidthSecondary?: string | number\n  /** Color of the background circle. Defaults to DEFAULT_COLOR. */\n  secondaryColor?: string\n  /** Duration of the rotation animation in seconds. Defaults to 1. */\n  animationDuration?: string | number\n  /** Accessible label announced to screen readers. Defaults to 'oval-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\n/**\n * The radius of the circle\n * The Loader size is set with the width and height of the SVG\n * @type {number}\n */\nconst RADIUS = 20\n\n/**\n * Compute Path depending on circle radius\n * The structure with radius 20 is \"M20 0c0-9.94-8.06-20-20-20\"\n * @param radius of the circle radius default 20\n * @returns {string}\n */\nconst getPath = (radius: number): string => {\n  return ['M' + radius + ' 0c0-9.94-8.06', radius, radius, radius].join('-')\n}\n/**\n * Compute the size of the view box depending on the radius and Stroke-Width\n * @param strokeWidth Stroke-Width of the full circle\n * @param secondaryStrokeWidth Stroke-Width of the 1/4 circle\n * @param radius radius of the circle\n * @returns {string}\n */\nconst getViewBoxSize = (\n  strokeWidth: number,\n  secondaryStrokeWidth: number,\n  radius: number\n): string => {\n  const maxStrokeWidth = Math.max(strokeWidth, secondaryStrokeWidth)\n  const startingPoint = -radius - maxStrokeWidth / 2 + 1\n  const endpoint = radius * 2 + maxStrokeWidth\n  return [startingPoint, startingPoint, endpoint, endpoint].join(' ')\n}\n\nexport const Oval: FunctionComponent<OvalProps> = ({\n  height = 80,\n  width = 80,\n  color = DEFAULT_COLOR,\n  secondaryColor = DEFAULT_COLOR,\n  ariaLabel = 'oval-loading',\n  wrapperStyle,\n  wrapperClass,\n  visible = true,\n  strokeWidth = 2,\n  strokeWidthSecondary,\n  animationDuration = 1,\n}): ReactElement => (\n  <SvgWrapper\n    style={wrapperStyle}\n    $visible={visible}\n    className={wrapperClass}\n    data-testid=\"oval-loading\"\n    aria-label={ariaLabel}\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      width={width}\n      height={height}\n      viewBox={getViewBoxSize(\n        Number(strokeWidth),\n        Number(strokeWidthSecondary || strokeWidth),\n        RADIUS\n      )}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke={color}\n      data-testid=\"oval-svg\"\n    >\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <g\n          transform=\"translate(1 1)\"\n          strokeWidth={Number(strokeWidthSecondary || strokeWidth)}\n          data-testid=\"oval-secondary-group\"\n        >\n          <circle\n            strokeOpacity=\".5\"\n            cx=\"0\"\n            cy=\"0\"\n            r={RADIUS}\n            stroke={secondaryColor}\n            strokeWidth={strokeWidth}\n          />\n          <path d={getPath(RADIUS)}>\n            <animateTransform\n              attributeName=\"transform\"\n              type=\"rotate\"\n              from=\"0 0 0\"\n              to=\"360 0 0\"\n              dur={`${animationDuration}s`}\n              repeatCount=\"indefinite\"\n            />\n          </path>\n        </g>\n      </g>\n    </svg>\n  </SvgWrapper>\n)\n"]}