react-loader-spinner
Version:
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
1 lines • 6 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/infinity-spin.tsx"],"names":["DEFAULT_COLOR","SVG_NAMESPACE","len","time","anim","keyframes","Path","styled","InfinitySpin","color","width","jsxs","jsx"],"mappings":"wMAEO,IAAMA,CAAAA,CAAgB,SAAA,CCFtB,IAAMC,CAAAA,CAAgB,4BAAA,KCsCvBC,CAAAA,CAAM,gBAAA,CACNC,CAAAA,CAAO,GAAA,CAEPC,CAAAA,CAAOC,WAAAA;AAAA;AAAA,oBAAA,EAESH,CAAAA,CAAM,GAAI,CAAA,IAAA,EAAOA,CAAG,CAAA;AAAA,sBAAA,EAClBA,EAAM,GAAI,CAAA;AAAA;AAAA;AAAA,oBAAA,EAGZA,CAAAA,CAAM,GAAI,CAAA,IAAA,EAAOA,CAAG,CAAA;AAAA,sBAAA,EAClBA,EAAM,GAAI,CAAA;AAAA;AAAA;AAAA,oBAAA,EAGZA,CAAAA,CAAM,GAAI,CAAA,IAAA,EAAOA,CAAG,CAAA;AAAA,sBAAA,EAClBA,EAAM,GAAI,CAAA;AAAA;AAAA,CAAA,CAI5BI,EAAOC,kBAAAA,CAAO,IAAA;AAAA,oBAAA,EACEL,CAAAA,CAAM,GAAI,CAAA,IAAA,EAAOA,CAAG,CAAA;AAAA;AAAA,aAAA,EAE3BE,CAAI,IAAID,CAAI,CAAA;AAAA,CAAA,CAGdK,CAAAA,CAAqD,CAAC,CACjE,KAAA,CAAAC,CAAAA,CAAQT,EACR,KAAA,CAAAU,CAAAA,CAAQ,KACV,CAAA,GAEGC,eAAAA,CAAC,KAAA,CAAA,CACF,MAAOV,CAAAA,CACP,KAAA,CAAO,CAAA,EAAGS,CAAK,CAAA,CAAA,CACf,MAAA,CAAQ,GAAG,MAAA,CAAOA,CAAK,CAAA,CAAI,EAAG,CAAA,CAAA,CAC9B,OAAA,CAAS,OAAOA,CAAK,CAAA,CAAA,EAAI,MAAA,CAAO,GAAA,CAAM,EAAG,CAAC,GAC1C,aAAA,CAAY,eAAA,CAEZ,QAAA,CAAA,CAAAE,cAAAA,CAAC,MAAA,CAAA,CACC,QAAA,CAAAD,gBAAC,gBAAA,CAAA,CAAe,EAAA,CAAG,eAAA,CAAgB,EAAA,CAAG,IAAA,CAAK,EAAA,CAAG,KAAK,EAAA,CAAG,MAAA,CAAO,EAAA,CAAG,IAAA,CAC9D,QAAA,CAAA,CAAAC,cAAAA,CAAC,QAAK,MAAA,CAAO,IAAA,CAAK,SAAA,CAAU,SAAA,CAAU,CAAA,CACtCA,cAAAA,CAAC,QAAK,MAAA,CAAO,MAAA,CAAO,SAAA,CAAU,SAAA,CAAU,CAAA,CAAA,CAC1C,CAAA,CACF,EAEAA,cAAAA,CAACN,CAAAA,CAAA,CACC,aAAA,CAAY,sBAAA,CACZ,MAAA,CAAQG,EACR,IAAA,CAAK,MAAA,CACL,WAAA,CAAY,GAAA,CACZ,aAAA,CAAc,OAAA,CACd,eAAe,OAAA,CACf,gBAAA,CAAiB,IAAA,CACjB,CAAA,CAAE,qMAAA,CACJ,CAAA,CACAG,eAAC,MAAA,CAAA,CACC,aAAA,CAAY,sBAAA,CACZ,OAAA,CAAQ,MAAA,CACR,IAAA,CAAK,OACL,MAAA,CAAQH,CAAAA,CACR,WAAA,CAAY,GAAA,CACZ,aAAA,CAAc,OAAA,CACd,cAAA,CAAe,OAAA,CACf,gBAAA,CAAiB,IAAA,CACjB,CAAA,CAAE,qMAAA,CACJ,CAAA,CAAA,CACF","file":"infinity-spin.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","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent, CSSProperties } from 'react'\nimport styled, { keyframes } from 'styled-components'\nimport { DEFAULT_COLOR } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the InfinitySpin loader component.\n * \n * The InfinitySpin loader displays an infinity symbol with spinning animation.\n * \n * @interface InfinitySpinProps\n */\ninterface InfinitySpinProps {\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 /** 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\nconst len = 242.776657104492\nconst time = 1.6\n\nconst anim = keyframes`\n12.5% {\n stroke-dasharray: ${len * 0.14}px, ${len}px;\n stroke-dashoffset: -${len * 0.11}px;\n}\n43.75% {\n stroke-dasharray: ${len * 0.35}px, ${len}px;\n stroke-dashoffset: -${len * 0.35}px;\n}\n100% {\n stroke-dasharray: ${len * 0.01}px, ${len}px;\n stroke-dashoffset: -${len * 0.99}px;\n}\n`\n\nconst Path = styled.path`\n stroke-dasharray: ${len * 0.01}px, ${len};\n stroke-dashoffset: 0;\n animation: ${anim} ${time}s linear infinite;\n`\n\nexport const InfinitySpin: FunctionComponent<InfinitySpinProps> = ({\n color = DEFAULT_COLOR,\n width = '200',\n}) => {\n return (\n <svg\n xmlns={SVG_NAMESPACE}\n width={`${width}`}\n height={`${Number(width) * 0.5}`}\n viewBox={`0 0 ${width} ${Number(200 * 0.5)}`}\n data-testid=\"infinity-spin\"\n>\n <defs>\n <linearGradient id=\"gradientColor\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stopColor=\"#4fa94d\" />\n <stop offset=\"100%\" stopColor=\"#00BFFF\" />\n </linearGradient>\n </defs>\n\n <Path\n data-testid=\"infinity-spin-path-1\"\n stroke={color}\n fill=\"none\"\n strokeWidth=\"4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z\"\n />\n <path\n data-testid=\"infinity-spin-path-2\"\n opacity=\"0.07\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z\"\n />\n</svg>\n \n )\n}\n"]}