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.86 kB
Source Map (JSON)
{"version":3,"sources":["../src/type.ts","../src/shared/svg-wrapper.tsx","../src/shared/constants.ts","../src/loader/bars.tsx"],"names":["DEFAULT_COLOR","DEFAULT_WAI_ARIA_ATTRIBUTE","SvgWrapper","styled","props","SVG_NAMESPACE","Bars","height","width","color","ariaLabel","wrapperStyle","wrapperClass","visible","jsx","jsxs"],"mappings":"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","file":"bars.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 { FunctionComponent, 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 Bars loader component.\n * \n * The Bars loader displays five animated vertical bars that move up and down\n * in a wave-like pattern, creating a loading animation similar to audio equalizer bars.\n * Each bar has a different animation timing to create a dynamic visual effect.\n * \n * @interface BarsProps\n */\ninterface BarsProps {\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 bars. Defaults to DEFAULT_COLOR. */\n color?: string\n /** Accessible label announced to screen readers. Defaults to 'bars-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 Bars: FunctionComponent<BarsProps> = ({\n height = 80,\n width = 80,\n color = DEFAULT_COLOR,\n ariaLabel = 'bars-loading',\n wrapperStyle,\n wrapperClass,\n visible = true,\n}) => (\n <SvgWrapper\n $visible={visible}\n style={{ ...wrapperStyle }}\n className={wrapperClass}\n data-testid=\"bars-loading\"\n aria-label={ariaLabel}\n {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n >\n <svg\n width={width}\n height={height}\n fill={color}\n viewBox=\"0 0 135 140\"\n xmlns={SVG_NAMESPACE}\n data-testid=\"bars-svg\"\n >\n <rect y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n <animate\n attributeName=\"height\"\n begin=\"0.5s\"\n dur=\"1s\"\n values=\"120;110;100;90;80;70;60;50;40;140;120\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"y\"\n begin=\"0.5s\"\n dur=\"1s\"\n values=\"10;15;20;25;30;35;40;45;50;0;10\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </rect>\n <rect x=\"30\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n <animate\n attributeName=\"height\"\n begin=\"0.25s\"\n dur=\"1s\"\n values=\"120;110;100;90;80;70;60;50;40;140;120\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"y\"\n begin=\"0.25s\"\n dur=\"1s\"\n values=\"10;15;20;25;30;35;40;45;50;0;10\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </rect>\n <rect x=\"60\" width=\"15\" height=\"140\" rx=\"6\">\n <animate\n attributeName=\"height\"\n begin=\"0s\"\n dur=\"1s\"\n values=\"120;110;100;90;80;70;60;50;40;140;120\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"y\"\n begin=\"0s\"\n dur=\"1s\"\n values=\"10;15;20;25;30;35;40;45;50;0;10\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </rect>\n <rect x=\"90\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n <animate\n attributeName=\"height\"\n begin=\"0.25s\"\n dur=\"1s\"\n values=\"120;110;100;90;80;70;60;50;40;140;120\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"y\"\n begin=\"0.25s\"\n dur=\"1s\"\n values=\"10;15;20;25;30;35;40;45;50;0;10\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </rect>\n <rect x=\"120\" y=\"10\" width=\"15\" height=\"120\" rx=\"6\">\n <animate\n attributeName=\"height\"\n begin=\"0.5s\"\n dur=\"1s\"\n values=\"120;110;100;90;80;70;60;50;40;140;120\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"y\"\n begin=\"0.5s\"\n dur=\"1s\"\n values=\"10;15;20;25;30;35;40;45;50;0;10\"\n calcMode=\"linear\"\n repeatCount=\"indefinite\"\n />\n </rect>\n </svg>\n </SvgWrapper>\n)\n"]}