Hairball

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

      render(
        <Hairball
        preset="dawn" // or preset={HairballPreset.sunset}
        />
      )

---

More Example:

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

---

Props

Name	Type	Default	Description
ariaLabel	string	Hairball-loading	Specifies the Aria label of the Hairball. This label will be applied to the aria-label attribute in the wrapper element.
colors	{fillColor1: string, fillColor2: string, fillColor3:string, fillColor4:string}	undefined	An objects of colors to use in given structure. If this prop is provided, the preset prop will be ignored.
height	number | string	80	Specifies the height of the Hairball SVG. For additional customization, employ the wrapper className.
preset	'sunset' | 'ocean' | 'forest' | 'twilight' | 'dawn' | 'dusk' | 'midday' | 'midnight' | 'sunrise' | 'rainbow'	undefined	The preset color schema to use. Please see Preset section for more information.
visible	boolean	true	Controls the visibility of the Hairball. If set to false, the Hairball will not be rendered.
width	number | string	80	Specifies the width of the Hairball 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={HairballPreset.sunset}
ocean		preset={HairballPreset.ocean}
forest		preset={HairballPreset.forest}
twilight		preset={HairballPreset.twilight}
dawn		preset={HairballPreset.dawn}
dusk		preset={HairballPreset.dusk}
midday		preset={HairballPreset.midday}
midnight		preset={HairballPreset.midnight}
sunrise		preset={HairballPreset.sunrise}
rainbow		preset={HairballPreset.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: <Hairball preset={HairballPreset.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:

<Hairball
  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.