react-fancy-loader

Inspiration

This package is implemented based on the styles provided by LoadLab. And it relies on Styled Components.

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

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

BORDER TOP SPINNER

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

DOUBLE BORDER SPINNER

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

DOUBLE SPINNERS

REVERSE SPINNER

TRIPLE SPINNER

CM spinner

MUTLI SPINNER

3 DOT LOADER

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

FULL CIRCLE LOADER

SPINNER 13

MESH LOADER

HEART LOADER

TRIFORCE LOADER