react-fancy-loader/README.md

A lightweight set of fancy loaders for your React applications. The package uses ESM, which enables tree shaking.

## Inspiration

This package is implemented based on the styles provided by [LoadLab](https://github.com/CamdenFoucht/LoadLab). And it relies on [Styled Components](https://styled-components.com/).

## Purpose

The main purpose of this package is to provide a lightweight, and fancy looking loaders for your react applications. That's why it relies on ESM to allow you to use tree-shaking to reduce the bundle size, by only including the loaders/components that you'll use.

## Getting Started

To install `react-fancy-loader` run:

`yarn add react-fancy-loader`

or

`npm i --save react-fancy-loader`

## Quick Example

### NO BORDER SPINNER

```jsx
<NoBorderSpinner size={60} color="red" stroke={3} duration={1000} />
```

### BORDER TOP SPINNER

```jsx
<BorderTopSpinner
    size={70}
    color="red"
    outlineColor="#222"
    stroke={4}
    duration={700}
/>
```

### DOUBLE BORDER SPINNER

```jsx
<DoubleBorderSpinner
    size={70}
    color="red"
    outlineColor="#222"
    stroke={4}
    duration={700}
/>
```

### DOUBLE SPINNERS

### REVERSE SPINNER

### TRIPLE SPINNER

### CM spinner

### MUTLI SPINNER

### 3 DOT LOADER

```jsx
<DotLoader size={10} color="red" duration={1000} />
```

### FULL CIRCLE LOADER

### SPINNER 13

### MESH LOADER

### HEART LOADER

### TRIFORCE LOADER