react-loader-spinner/dist/progress-bar.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/constants.ts","../src/loader/progress-bar.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","ProgressBar","visible","height","width","wrapperClass","wrapperStyle","ariaLabel","borderColor","barColor","jsxs","jsx"],"mappings":"yCAIO,IAAMA,CAAAA,CAA6B,CACxC,WAAA,CAAa,IAAA,CACb,KAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,6BCyCtB,IAAMC,CAAAA,CAAmD,CAAC,CAC/D,OAAA,CAAAC,CAAAA,CAAU,IAAA,CACV,MAAA,CAAAC,EAAS,IAAA,CACT,KAAA,CAAAC,CAAAA,CAAQ,IAAA,CACR,aAAAC,CAAAA,CAAe,EAAA,CACf,YAAA,CAAAC,CAAAA,CAAe,EAAC,CAChB,SAAA,CAAAC,CAAAA,CAAY,sBAAA,CACZ,YAAAC,CAAAA,CAAc,SAAA,CACd,QAAA,CAAAC,CAAAA,CAAW,SACb,CAAA,GACUP,CAAAA,CACNQ,IAAAA,CAAC,KAAA,CAAA,CACC,MAAON,CAAAA,CACP,MAAA,CAAQD,CAAAA,CACR,KAAA,CAAOH,EACP,OAAA,CAAQ,aAAA,CACR,mBAAA,CAAoB,UAAA,CACpB,UAAWK,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACP,YAAA,CAAYC,EACZ,aAAA,CAAY,kBAAA,CACX,GAAGR,CAAAA,CAEJ,UAAAY,GAAAA,CAAC,MAAA,CAAA,CACC,QAAA,CAAAA,GAAAA,CAAC,YACC,CAAA,CAAE,GAAA,CACF,CAAA,CAAE,GAAA,CACF,KAAA,CAAM,KAAA,CACN,MAAA,CAAO,KAAA,CACP,GAAG,iCAAA,CAEH,QAAA,CAAAD,IAAAA,CAAC,MAAA,CAAA,CAAK,EAAE,GAAA,CAAI,CAAA,CAAE,GAAA,CAAI,KAAA,CAAM,UAAU,MAAA,CAAO,KAAA,CACvC,QAAA,CAAA,CAAAC,GAAAA,CAAC,WACC,aAAA,CAAc,OAAA,CACd,QAAA,CAAS,QAAA,CACT,OAAO,WAAA,CACP,QAAA,CAAS,SAAA,CACT,GAAA,CAAI,IACJ,KAAA,CAAM,IAAA,CACN,WAAA,CAAY,YAAA,CACb,EACDA,GAAAA,CAAC,SAAA,CAAA,CACC,aAAA,CAAc,GAAA,CACd,SAAS,QAAA,CACT,MAAA,CAAO,SAAA,CACP,QAAA,CAAS,UACT,GAAA,CAAI,GAAA,CACJ,KAAA,CAAM,IAAA,CACN,YAAY,YAAA,CACb,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CACF,EACAA,GAAAA,CAAC,MAAA,CAAA,CACC,IAAA,CAAK,MAAA,CACL,YAAY,QAAA,CACZ,CAAA,CAAE,mGAAA,CACF,MAAA,CAAQH,EACT,CAAA,CACDG,GAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,2HACF,IAAA,CAAMF,CAAAA,CACN,QAAA,CAAS,uCAAA,CACV,GACH,CAAA,CAtDgB","file":"progress-bar.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","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent, CSSProperties } from 'react'\nimport { DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the ProgressBar loader component.\n * \n * The ProgressBar loader displays a horizontal progress bar animation.\n * \n * @interface ProgressBarProps\n */\ninterface ProgressBarProps {\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. */\n  color?: string\n  /** Color of the progress bar border. Defaults to '#F4442E'. */\n  borderColor?: string\n  /** Color of the progress bar fill. Defaults to '#51E5FF'. */\n  barColor?: 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}\n\nexport const ProgressBar: FunctionComponent<ProgressBarProps> = ({\n  visible = true,\n  height = '80',\n  width = '80',\n  wrapperClass = '',\n  wrapperStyle = {},\n  ariaLabel = 'progress-bar-loading',\n  borderColor = '#F4442E',\n  barColor = '#51E5FF',\n}) => {\n  return !visible ? null : (\n    <svg\n      width={width}\n      height={height}\n      xmlns={SVG_NAMESPACE}\n      viewBox=\"0 0 100 100\"\n      preserveAspectRatio=\"xMidYMid\"\n      className={wrapperClass}\n      style={wrapperStyle}\n      aria-label={ariaLabel}\n      data-testid=\"progress-bar-svg\"\n      {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n    >\n      <defs>\n        <clipPath\n          x=\"0\"\n          y=\"0\"\n          width=\"100\"\n          height=\"100\"\n          id=\"lds-progress-cpid-5009611b8a418\"\n        >\n          <rect x=\"0\" y=\"0\" width=\"66.6667\" height=\"100\">\n            <animate\n              attributeName=\"width\"\n              calcMode=\"linear\"\n              values=\"0;100;100\"\n              keyTimes=\"0;0.5;1\"\n              dur=\"1\"\n              begin=\"0s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n            <animate\n              attributeName=\"x\"\n              calcMode=\"linear\"\n              values=\"0;0;100\"\n              keyTimes=\"0;0.5;1\"\n              dur=\"1\"\n              begin=\"0s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </rect>\n        </clipPath>\n      </defs>\n      <path\n        fill=\"none\"\n        strokeWidth=\"2.7928\"\n        d=\"M82,63H18c-7.2,0-13-5.8-13-13v0c0-7.2,5.8-13,13-13h64c7.2,0,13,5.8,13,13v0C95,57.2,89.2,63,82,63z\"\n        stroke={borderColor}\n      ></path>\n      <path\n        d=\"M81.3,58.7H18.7c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h62.7c4.8,0,8.7,3.9,8.7,8.7v0C90,54.8,86.1,58.7,81.3,58.7z\"\n        fill={barColor}\n        clipPath=\"url(#lds-progress-cpid-5009611b8a418)\"\n      ></path>\n    </svg>\n  )\n}\n"]}