/react-fancy-loader

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

Primary LanguageCSSMIT LicenseMIT

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