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 • 7.34 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/shared/constants.ts","../src/loader/tail-spin.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","TailSpin","height","width","strokeWidth","radius","color","ariaLabel","wrapperStyle","wrapperClass","visible","strokeWidthNum","viewBoxValue","halfStrokeWidth","processedRadius","jsx","jsxs"],"mappings":"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","file":"tail-spin.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 TailSpin loader component.\n * \n * The TailSpin loader displays a spinning animation with a tail-like effect.\n * \n * @interface TailSpinProps\n */\ninterface TailSpinProps {\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 strokeWidth?: string | number\n}\n\nexport const TailSpin: FunctionComponent<TailSpinProps> = ({\n height = 80,\n width = 80,\n strokeWidth = 2,\n radius = 1,\n color = DEFAULT_COLOR,\n ariaLabel = 'tail-spin-loading',\n wrapperStyle,\n wrapperClass,\n visible = true,\n}): ReactElement => {\n const strokeWidthNum = parseInt(String(strokeWidth))\n const viewBoxValue = strokeWidthNum + 36\n const halfStrokeWidth = strokeWidthNum / 2\n const processedRadius = halfStrokeWidth + parseInt(String(radius)) - 1\n return (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n data-testid=\"tail-spin-loading\"\n aria-label={ariaLabel}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n width={width}\n height={height}\n viewBox={`0 0 ${viewBoxValue} ${viewBoxValue}`}\n xmlns={SVG_NAMESPACE}\n data-testid=\"tail-spin-svg\"\n >\n <defs>\n <linearGradient x1=\"8.042%\" y1=\"0%\" x2=\"65.682%\" y2=\"23.865%\" id=\"a\">\n <stop stopColor={color} stopOpacity=\"0\" offset=\"0%\" />\n <stop stopColor={color} stopOpacity=\".631\" offset=\"63.146%\" />\n <stop stopColor={color} offset=\"100%\" />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <g transform={`translate(${halfStrokeWidth} ${halfStrokeWidth})`}>\n <path\n d=\"M36 18c0-9.94-8.06-18-18-18\"\n id=\"Oval-2\"\n stroke={color}\n strokeWidth={strokeWidth}\n >\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"0.9s\"\n repeatCount=\"indefinite\"\n />\n </path>\n <circle fill=\"#fff\" cx=\"36\" cy=\"18\" r={processedRadius}>\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"0.9s\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </g>\n </svg>\n </SvgWrapper>\n )\n}\n"]}