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 • 8.72 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/blocks.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","Blocks","visible","width","height","wrapperClass","wrapperStyle","ariaLabel","jsxs","jsx"],"mappings":"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","file":"blocks.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, ReactElement, CSSProperties } from 'react'\nimport { DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the Blocks loader component.\n * \n * The Blocks loader displays a grid of animated square blocks that appear and disappear\n * in a wave-like pattern. The blocks fill in with color sequentially to create\n * a dynamic loading animation resembling falling tetris blocks.\n * \n * @interface BlocksProps\n */\ninterface BlocksProps {\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 blocks. Can be overridden by colors array. */\n color?: string\n /** Accessible label announced to screen readers. Defaults to 'blocks-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\nexport const Blocks: FunctionComponent<BlocksProps> = ({\n visible = true,\n width = '80',\n height = '80',\n wrapperClass = '',\n wrapperStyle = {},\n ariaLabel = 'blocks-loading',\n}): ReactElement | null => {\n return !visible ? null : (\n <svg\n width={width}\n height={height}\n className={wrapperClass}\n style={wrapperStyle}\n xmlns={SVG_NAMESPACE}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n aria-label={ariaLabel}\n data-testid=\"blocks-svg\"\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <title>Blocks</title>\n <desc>Animated representation of blocks</desc>\n <rect x=\"17\" y=\"17\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"40\" y=\"17\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.125s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"63\" y=\"17\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.25s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"17\" y=\"40\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.875s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"63\" y=\"40\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.375s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"17\" y=\"63\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.75s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"40\" y=\"63\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.625s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n <rect x=\"63\" y=\"63\" width=\"20\" height=\"20\" fill=\"#577c9b\">\n <animate\n attributeName=\"fill\"\n values=\"#0dceff;#577c9b;#577c9b\"\n keyTimes=\"0;0.125;1\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n begin=\"0.5s\"\n calcMode=\"discrete\"\n ></animate>\n </rect>\n </svg>\n )\n}\n"]}