Yin Yang Loader

An animated SVG yin-yang loading spinner for React.

npm install @olegthecoder/yin-yang-loader

YinYangLoader

A classic yin-yang symbol that rotates endlessly.

import { YinYangLoader } from '@olegthecoder/yin-yang-loader';

<YinYangLoader />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 100 | Width and height in pixels | | yinColor | string | '#1A1A1A' | Color of the yin (dark) half | | yangColor | string | '#FDFDFD' | Color of the yang (light) half | | speed | number | 1 | Animation speed multiplier | | strokeColor | string | '#E0E0E0' | Color of the outer outline | | showShadow | boolean | true | Whether to show the drop shadow |

Options

// Size
<YinYangLoader size={60} />
<YinYangLoader size={200} />

// Colors
<YinYangLoader yinColor="#8b0000" yangColor="#ff6b6b" />
<YinYangLoader yinColor="#1a3a5c" yangColor="#e8f4f8" />

// Speed
<YinYangLoader speed={0.5} />
<YinYangLoader speed={2} />
<YinYangLoader speed={3} />

// No shadow
<YinYangLoader showShadow={false} />

// Combined
<YinYangLoader size={150} yinColor="#2d1b69" yangColor="#f0e6ff" speed={1.5} />

License

MIT