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 • 10.4 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/shared/constants.ts","../src/shared/gradient.tsx","../src/loader/circles.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","useGradient","colors","gradientType","gradientAngle","isGradient","gradientId","useMemo","defs","jsx","c","i","url","Circles","height","width","color","ariaLabel","wrapperStyle","wrapperClass","visible","jsxs"],"mappings":"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","file":"circles.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","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 { useMemo } from 'react'\n\nexport interface GradientConfig {\n colors?: string[]\n gradientType?: 'linear' | 'radial'\n gradientAngle?: number\n}\n\nexport const useGradient = ({\n colors,\n gradientType = 'linear',\n gradientAngle = 0,\n}: GradientConfig) => {\n const isGradient = !!colors && colors.length > 1\n // Lightweight id generator to avoid pulling ESM-only libs for test env\n const gradientId = useMemo(() => (isGradient ? `rls-grad-${Math.random().toString(36).slice(2, 8)}` : undefined), [isGradient])\n\n const defs = useMemo(() => {\n if (!isGradient || !gradientId || !colors) return null\n if (gradientType === 'radial') {\n return (\n <radialGradient id={gradientId} cx=\"50%\" cy=\"50%\" r=\"50%\">\n {colors.map((c, i) => (\n <stop key={c + i} offset={`${(i / (colors.length - 1)) * 100}%`} stopColor={c} />\n ))}\n </radialGradient>\n )\n }\n return (\n <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\" gradientTransform={`rotate(${gradientAngle})`}>\n {colors.map((c, i) => (\n <stop key={c + i} offset={`${(i / (colors.length - 1)) * 100}%`} stopColor={c} />\n ))}\n </linearGradient>\n )\n }, [colors, gradientAngle, gradientId, gradientType, isGradient])\n\n const url = gradientId ? `url(#${gradientId})` : undefined\n return { isGradient, gradientId, defs, url }\n}\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'\nimport { useGradient } from '../shared/gradient'\n\n/**\n * Props for the Circles loader component.\n * \n * The Circles loader displays a series of circular dots arranged in a circle\n * that animate with different opacity and scaling effects. Each dot fades in and out\n * in sequence to create a rotating loading animation.\n * \n * @interface CirclesProps\n */\ninterface CirclesProps {\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 circles. Defaults to DEFAULT_COLOR. */\n color?: string\n /** Accessible label announced to screen readers. Defaults to 'circles-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 * 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 circles.\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 Circles: FunctionComponent<CirclesProps> = ({\n height = 80,\n width = 80,\n color = DEFAULT_COLOR,\n colors,\n gradientType,\n gradientAngle,\n ariaLabel = 'circles-loading',\n wrapperStyle,\n wrapperClass,\n visible = true,\n}): ReactElement => {\n const { defs, url } = useGradient({ colors, gradientType, gradientAngle })\n const fillValue = url || color\n return (\n <SvgWrapper\n style={wrapperStyle}\n $visible={visible}\n className={wrapperClass}\n aria-label={ariaLabel}\n data-testid=\"circles-loading\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n width={width}\n height={height}\n viewBox=\"0 0 135 135\"\n xmlns={SVG_NAMESPACE}\n fill={fillValue}\n data-testid=\"circles-svg\"\n >\n {defs && <defs>{defs}</defs>}\n <title>circles-loading</title>\n <desc>Animated representation of circles</desc>\n <path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 67 67\"\n to=\"-360 67 67\"\n dur=\"2.5s\"\n repeatCount=\"indefinite\"\n />\n </path>\n <path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 67 67\"\n to=\"360 67 67\"\n dur=\"8s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </svg>\n </SvgWrapper>\n )\n}\n"]}