react-loader-spinner/dist/grid.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/grid.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","Grid","height","width","radius","color","ariaLabel","wrapperStyle","wrapperClass","visible","jsx","jsxs"],"mappings":"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","file":"grid.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 Grid loader component.\n * \n * The Grid loader shows a grid of squares that appear and disappear in a pattern.\n * \n * @interface GridProps\n */\ninterface GridProps {\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?: string | number\n}\n\nexport const Grid: FunctionComponent<GridProps> = ({\n  height = 80,\n  width = 80,\n  radius = 12.5,\n  color = DEFAULT_COLOR,\n  ariaLabel = 'grid-loading',\n  wrapperStyle,\n  wrapperClass,\n  visible = true,\n}): ReactElement => (\n  <SvgWrapper\n    style={wrapperStyle}\n    $visible={visible}\n    className={wrapperClass}\n    data-testid=\"grid-loading\"\n    aria-label={ariaLabel}\n    {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n  >\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 105 105\"\n      fill={color}\n      data-testid=\"grid-svg\"\n    >\n      <circle cx=\"12.5\" cy=\"12.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"0s\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"12.5\" cy=\"52.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"100ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"52.5\" cy=\"12.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"300ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"52.5\" cy=\"52.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"600ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"92.5\" cy=\"12.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"800ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"92.5\" cy=\"52.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"400ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"12.5\" cy=\"92.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"700ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"52.5\" cy=\"92.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"500ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"92.5\" cy=\"92.5\" r={`${radius}`}>\n        <animate\n          attributeName=\"fill-opacity\"\n          begin=\"200ms\"\n          dur=\"1s\"\n          values=\"1;.2;1\"\n          calcMode=\"linear\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </svg>\n  </SvgWrapper>\n)\n"]}