Whirl

  // import { Hairball, HairballPreset } from 'react-loader-spinner/dist/beta';


  render(
    <Whirl
      preset='rainbow'
      speedInSecond={2}
      width='100'
      height='100'
    />)

---

More Example:

Here are some more examples of the Whirl component using different presets. It is recommended that you use the presets, as they are designed to work well with the Whirl component. However, you can also pass your own colors to the Whirl component. See the colors props section for more information.

Props

Name	Type	Default	Description
ariaLabel	string	Whirl-loading	Specifies the Aria label of the Whirl. This label will be applied to the aria-label attribute in the wrapper element.
colors	object	undefined	An object containing the colors to use for the Whirl component. See the custom colors section for more information.
height	number | string	80	Specifies the height of the Whirl SVG. For additional customization, employ the wrapper className.
preset	'sunset' | 'ocean' | 'forest' | 'twilight' | 'dawn' | 'dusk' | 'midday' | 'midnight' | 'sunrise' | 'rainbow'	undefined	The preset to use for the Whirl component. See the presets section for more information.
speedInSecond	number	1	The speed of the whirl in seconds. The higher the number, the slower the whirl.
visible	boolean	true	Controls the visibility of the Whirl. If set to false, the Whirl will not be rendered.
width	number | string	80	Specifies the width of the Whirl SVG. For further customization, utilize the wrapper className.
wrapperClass	string	undefined	Assigns a className to the wrapper for custom styling, overriding the default style.
wrapperStyle	object	{}	Applies styles to the wrapper. It should be a valid CSS object and can be used for custom styling, overriding the default style.

Presets

---

The following presets are available:

Preset	Colors	Name
sunset		preset={WhirlPreset.sunset}
ocean		preset={WhirlPreset.ocean}
forest		preset={WhirlPreset.forest}
twilight		preset={WhirlPreset.twilight}
dawn		preset={WhirlPreset.dawn}
dusk		preset={WhirlPreset.dusk}
midday		preset={WhirlPreset.midday}
midnight		preset={WhirlPreset.midnight}
sunrise		preset={WhirlPreset.sunrise}
rainbow		preset={WhirlPreset.rainbow}

Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the preset prop of the Hairball component, like this: <Whirl preset={WhirlPreset.sunset} />.

---

Custom Colors

You can also pass your own colors to the Hairball component. To do this, pass an object to the colors prop of the Hairball component, like this:

<Whirl
  colors={{
    fillColor1: '#ff0000',
    fillColor2: '#00ff00',
    fillColor3: '#0000ff',
    fillColor4: '#ffff00'
  }}
/>

The colors prop takes an object with the following properties:

• fillColor1 - The color of the first fill.
• fillColor2 - The color of the second fill.
• fillColor3 - The color of the third fill.
• fillColor4 - The color of the fourth fill.