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 • 17.5 kB
Source Map (JSON)
{"version":3,"sources":["../src/color-schemas/four-colors-schema.ts","../src/experimental/hairball.tsx","../src/experimental/whirl.tsx"],"names":["FourColorsSchemeNames","FourColorsSchema","HairballPresetColors","HairballPreset","HAIRBALL_DEFAULT_COLOR","Hairball","colors","backgroundColor","speed","width","height","visible","ariaLabel","wrapperClass","wrapperStyle","preset","fillColor1","fillColor2","fillColor3","fillColor4","jsx","jsxs","DEFAULT_COLOR","WhirlPreset","WhirlPresetColors","Whirl","background","speedInSecond","_a","_b"],"mappings":"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","file":"beta.mjs","sourcesContent":["export const FourColorsSchemeNames = {\n sunset: 'sunset',\n ocean: 'ocean',\n forest: 'forest',\n twilight: 'twilight',\n dawn: 'dawn',\n dusk: 'dusk',\n midday: 'midday',\n midnight: 'midnight',\n sunrise: 'sunrise',\n rainbow: 'rainbow',\n}\n\nexport const FourColorsSchema = {\n [FourColorsSchemeNames.sunset]: {\n fillColor1: '#e15b64',\n fillColor2: '#f47e60',\n fillColor3: '#f8b26a',\n fillColor4: '#abbd81',\n },\n [FourColorsSchemeNames.ocean]: {\n fillColor1: '#3498db',\n fillColor2: '#2ecc71',\n fillColor3: '#1abc9c',\n fillColor4: '#9b59b6',\n },\n [FourColorsSchemeNames.forest]: {\n fillColor1: '#27ae60',\n fillColor2: '#16a085',\n fillColor3: '#f39c12',\n fillColor4: '#d35400',\n },\n [FourColorsSchemeNames.twilight]: {\n fillColor1: '#8e44ad',\n fillColor2: '#c0392b',\n fillColor3: '#d35400',\n fillColor4: '#f39c12',\n },\n [FourColorsSchemeNames.dawn]: {\n fillColor1: '#c0392b',\n fillColor2: '#d35400',\n fillColor3: '#f39c12',\n fillColor4: '#16a085',\n },\n [FourColorsSchemeNames.dusk]: {\n fillColor1: '#9b59b6',\n fillColor2: '#34495e',\n fillColor3: '#16a085',\n fillColor4: '#27ae60',\n },\n [FourColorsSchemeNames.midday]: {\n fillColor1: '#2ecc71',\n fillColor2: '#3498db',\n fillColor3: '#9b59b6',\n fillColor4: '#34495e',\n },\n [FourColorsSchemeNames.midnight]: {\n fillColor1: '#34495e',\n fillColor2: '#16a085',\n fillColor3: '#27ae60',\n fillColor4: '#8e44ad',\n },\n [FourColorsSchemeNames.sunrise]: {\n fillColor1: '#f1c40f',\n fillColor2: '#e67e22',\n fillColor3: '#e74c3c',\n fillColor4: '#ecf0f1',\n },\n [FourColorsSchemeNames.rainbow]: {\n fillColor1: '#16a085',\n fillColor2: '#27ae60',\n fillColor3: '#3498db',\n fillColor4: '#8e44ad',\n },\n}\n\nexport type FourColorsSchemaType = keyof typeof FourColorsSchema\n","import { FC } from 'react'\nimport {\n FourColorsSchema,\n FourColorsSchemeNames,\n} from '../color-schemas/four-colors-schema'\nimport { PrimaryProps } from '../type'\n\nexport interface HairballCustomColor {\n fillColor1: string\n fillColor2: string\n fillColor3: string\n fillColor4: string\n}\nexport const HairballPresetColors = FourColorsSchema\nexport const HairballPreset = FourColorsSchemeNames\nexport type HairballPresetType = keyof typeof HairballPreset\nexport const HAIRBALL_DEFAULT_COLOR = FourColorsSchema.sunset\n\nexport interface HairballProps extends PrimaryProps {\n colors?: HairballCustomColor\n preset?: HairballPresetType | string\n backgroundColor?: string\n speed?: number\n width?: number\n height?: number\n}\n\nexport const Hairball: FC<HairballProps> = ({\n colors = HAIRBALL_DEFAULT_COLOR,\n backgroundColor = '#fff',\n speed = 2,\n width = 100,\n height = 100,\n visible = true,\n ariaLabel = 'Hairball loading',\n wrapperClass = '',\n wrapperStyle = {},\n preset,\n}) => {\n const {\n fillColor1 = HairballPresetColors.dawn.fillColor1,\n fillColor2 = HairballPresetColors.dawn.fillColor2,\n fillColor3 = HairballPresetColors.dawn.fillColor3,\n fillColor4 = HairballPresetColors.dawn.fillColor4,\n } = preset ? HairballPresetColors[preset] : colors\n\n if (!visible) {\n return null\n }\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n style={{\n margin: 'auto',\n background: backgroundColor,\n display: 'block',\n ...wrapperStyle,\n }}\n width={width}\n height={height}\n aria-label={ariaLabel}\n className={wrapperClass}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n role=\"progressbar\"\n data-testid=\"hairball\"\n >\n <g transform=\"translate(50,50)\">\n <g transform=\"scale(0.8)\">\n <g transform=\"translate(-50,-50)\">\n <g>\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n repeatCount=\"indefinite\"\n values=\"0 50 50;360 50 50\"\n keyTimes=\"0;1\"\n dur={`${speed}s`}\n keySplines=\"0.5 0.5 0.5 0.5\"\n calcMode=\"spline\"\n ></animateTransform>\n\n <path\n fill={fillColor1}\n d=\"M51.8,9.9c-8.2-6.6-20.5-4.3-26,4.5c1.9-0.3,3.8-0.4,5.7-0.1c9.9-5.7,22.9-0.9,26.9,9.8 C58.5,18.7,56.1,13.4,51.8,9.9z\"\n ></path>\n <path\n fill={fillColor2}\n d=\"M44.1,23c-4-6.9-12.3-10.3-20-8.1c-7.4,2-12.6,8.8-12.8,16.5c1.5-1.2,3.1-2.2,4.9-2.9 c5.7-9.8,19.4-12.2,28.1-5C44.3,23.3,44.2,23.1,44.1,23z\"\n ></path>\n <path\n fill={fillColor3}\n d=\"M31.4,29.5c-6.8-3.9-15.6-2.8-21.1,2.7c-5.6,5.4-6.8,14.1-3.1,20.9c0.7-1.8,1.6-3.5,2.8-5 c0-11.4,10.7-20.3,21.9-18.4C31.7,29.7,31.5,29.6,31.4,29.5z\"\n ></path>\n <path\n fill={fillColor4}\n d=\"M12.1,57c0.8-7.1,5.6-13,12.1-15.4c-8.1-0.2-15.4,5.2-17.5,13c-2,7.5,1.2,15.5,7.8,19.6 c-0.3-1.9-0.4-3.8-0.1-5.7C12.4,65,11.6,61,12.1,57z\"\n ></path>\n <path\n fill={fillColor1}\n d=\"M28.4,83.8c-9.8-5.7-12.2-19.4-5-28.1c-7.1,3.8-10.7,12.2-8.6,20c2,7.5,8.8,12.8,16.5,13 C30.1,87.2,29.1,85.6,28.4,83.8z\"\n ></path>\n <path\n fill={fillColor2}\n d=\"M48.2,90.1c-11.4,0-20.3-10.7-18.4-21.9c-4.2,6.8-3.2,15.6,2.3,21.4c5.4,5.7,14.2,7,21.1,3.3 C51.4,92.2,49.7,91.2,48.2,90.1z\"\n ></path>\n <path\n fill={fillColor3}\n d=\"M68.5,85.6c-9.9,5.7-22.9,0.9-26.9-9.8c-0.2,8.1,5.2,15.4,13,17.5c7.5,2,15.5-1.2,19.6-7.8 C72.3,85.8,70.4,85.9,68.5,85.6z\"\n ></path>\n <path\n fill={fillColor4}\n d=\"M83.8,71.6c-5.7,9.8-19.4,12.2-28.1,5c3.8,7.1,12.2,10.7,20,8.6c7.5-2,12.8-8.8,13-16.5 C87.2,69.9,85.6,70.9,83.8,71.6z\"\n ></path>\n <path\n fill={fillColor1}\n d=\"M92.9,46.8c-0.7,1.8-1.6,3.5-2.8,5c0,11.4-10.7,20.3-21.9,18.4c6.8,4.2,15.6,3.2,21.4-2.3 C95.3,62.5,96.6,53.7,92.9,46.8z\"\n ></path>\n <path\n fill={fillColor2}\n d=\"M85.5,25.8c0.3,1.9,0.4,3.8,0.1,5.7c5.7,9.9,0.9,22.9-9.8,26.9c8.1,0.2,15.4-5.2,17.5-13 C95.3,37.9,92.1,29.8,85.5,25.8z\"\n ></path>\n <path\n fill={fillColor3}\n d=\"M71.6,16.2C67.8,6.4,56,2.2,46.8,7.1c1.8,0.7,3.5,1.6,5,2.8c11.4,0,20.3,10.7,18.4,21.9 C73.1,27.1,73.6,21.3,71.6,16.2z\"\n ></path>\n <path\n fill={fillColor4}\n d=\"M85.5,25.8c-1.4-8.2-8.6-14.3-16.9-14.5c1.2,1.5,2.2,3.1,2.9,4.9c9.8,5.7,12.2,19.4,5,28.1 C83.2,40.7,86.8,33.2,85.5,25.8z\"\n ></path>\n </g>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n","import { FunctionComponent } from 'react'\nimport {\n FourColorsSchema,\n FourColorsSchemeNames\n} from '../color-schemas/four-colors-schema'\nimport { PrimaryProps } from '../type'\n\nexport interface CustomColor {\n fillColor1?: string\n fillColor2?: string\n fillColor3?: string\n fillColor4?: string\n}\n\nconst DEFAULT_COLOR = FourColorsSchema.sunset\nexport const WhirlPreset = FourColorsSchemeNames\nexport const WhirlPresetColors = FourColorsSchema\n\nexport interface WhirlProps extends PrimaryProps {\n background?: string\n colors?: CustomColor\n preset?: keyof typeof FourColorsSchemeNames\n speedInSecond?: number\n}\n\nexport const Whirl: FunctionComponent<WhirlProps> = ({\n height = 100,\n width = 100,\n wrapperClass = '',\n wrapperStyle = {},\n visible = true,\n background = 'transparent',\n colors = DEFAULT_COLOR,\n speedInSecond = 1,\n preset,\n}) => {\n if (!visible) return null\n\n const { fillColor1, fillColor2, fillColor3, fillColor4 } = preset\n ? FourColorsSchema?.[preset] ?? colors : colors\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n style={{\n margin: 'auto',\n background,\n display: 'block',\n ...wrapperStyle\n }}\n width={width}\n height={height}\n viewBox=\"0 0 100 100\"\n className={wrapperClass}\n preserveAspectRatio=\"xMidYMid\"\n data-testid=\"whirl\"\n >\n <g transform=\"translate(50,50)\">\n <g transform=\"scale(0.8)\">\n <g transform=\"translate(-50,-50)\">\n <g>\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n repeatCount=\"indefinite\"\n values=\"360 50 50;0 50 50\"\n keyTimes=\"0;1\"\n dur={`${speedInSecond}s`}\n keySplines=\"0.5 0.5 0.5 0.5\"\n calcMode=\"spline\"\n ></animateTransform>\n\n <path\n fill={fillColor1}\n d=\"M52.5,5c-0.8,0-1.7,0.1-2.5,0.1c9,1.2,16,10.8,16,22.4s-7,21.1-16,22.4c0.8,0.1,1.7,0.1,2.5,0.1 C64.9,50,75,39.9,75,27.5S64.9,5,52.5,5z\"\n ></path>\n <path\n fill={fillColor2}\n d=\"M83.6,19.9c-0.6-0.6-1.2-1.2-1.9-1.7c5.5,7.2,3.7,18.9-4.5,27.1s-19.9,10-27.1,4.5c0.5,0.6,1.1,1.3,1.7,1.9 c8.8,8.8,23,8.8,31.8,0S92.4,28.7,83.6,19.9z\"\n ></path>\n <path\n fill={fillColor3}\n d=\"M95,52.5c0-0.8-0.1-1.7-0.1-2.5c-1.2,9-10.8,16-22.4,16s-21.1-7-22.4-16c-0.1,0.8-0.1,1.7-0.1,2.5 C50,64.9,60.1,75,72.5,75S95,64.9,95,52.5z\"\n ></path>\n <path\n fill={fillColor4}\n d=\"M80.1,83.6c0.6-0.6,1.2-1.2,1.7-1.9c-7.2,5.5-18.9,3.7-27.1-4.5s-10-19.9-4.5-27.1c-0.6,0.5-1.3,1.1-1.9,1.7 c-8.8,8.8-8.8,23,0,31.8S71.3,92.4,80.1,83.6z\"\n ></path>\n <path\n fill={fillColor1}\n d=\"M47.5,95c0.8,0,1.7-0.1,2.5-0.1c-9-1.2-16-10.8-16-22.4s7-21.1,16-22.4c-0.8-0.1-1.7-0.1-2.5-0.1 C35.1,50,25,60.1,25,72.5S35.1,95,47.5,95z\"\n ></path>\n <path\n fill={fillColor2}\n d=\"M16.4,80.1c0.6,0.6,1.2,1.2,1.9,1.7c-5.5-7.2-3.7-18.9,4.5-27.1s19.9-10,27.1-4.5c-0.5-0.6-1.1-1.3-1.7-1.9 c-8.8-8.8-23-8.8-31.8,0S7.6,71.3,16.4,80.1z\"\n ></path>\n <path\n fill={fillColor3}\n d=\"M5,47.5c0,0.8,0.1,1.7,0.1,2.5c1.2-9,10.8-16,22.4-16s21.1,7,22.4,16c0.1-0.8,0.1-1.7,0.1-2.5 C50,35.1,39.9,25,27.5,25S5,35.1,5,47.5z\"\n ></path>\n <path\n fill={fillColor4}\n d=\"M19.9,16.4c-0.6,0.6-1.2,1.2-1.7,1.9c7.2-5.5,18.9-3.7,27.1,4.5s10,19.9,4.5,27.1c0.6-0.5,1.3-1.1,1.9-1.7 c8.8-8.8,8.8-23,0-31.8S28.7,7.6,19.9,16.4z\"\n ></path>\n </g>\n </g>\n </g>\n </g>\n </svg>\n )\n}\n"]}