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

Props

Loading prop definitions…

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.