React-js-loader

demo page

Install

npm i react-js-loader

For Pure JS Smart Loader

Smart Loader

Documentation

props

Name	Type
type	String
bgColor	String
color	String
title	String
size	Integer
LICENSE	LICENSE

Types Color	Types	Value Example
rgb	String	rgb(0, 0, 0) or rgb(0%, 0%, 0%)
hex	String	#000000 or #000
hsl	String	hsl(0deg 0% 0%)
name	String	black

Types
box-rotate-x
box-rotate-y
box-rotate-z
box-rectangular
heart
bubble-scale
bubble-top
bubble-ping
bubble-spin
bubble-loop
spinner-cub
spinner-circle
spinner-default
ekvalayzer
hourglass
rectangular-ping

color and bgColor = rgb or hex

Example

import React from 'react';

....
....
....

import Loader from "react-js-loader";

....
....
....

return (
    <div className="App">
        <div className={"row"}>
            <div className={"item"}>
                <Loader type="box-rotate-x" bgColor={"#FFFFFF"} title={"box-rotate-x"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="box-rotate-y" bgColor={"#FFFFFF"} title={"box-rotate-y"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="box-rotate-z" bgColor={"#FFFFFF"} title={"box-rotate-z"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="box-up" bgColor={"#FFFFFF"} title={"box-up"} color={'#FFFFFF'} size={100} />
            </div>
        </div>
        <div className={"row"}>
            <div className={"item"}>
                <Loader type="bubble-scale" bgColor={"#FFFFFF"} title={"bubble-scale"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="heart" bgColor={"#FFFFFF"} title={"heart"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="bubble-top" bgColor={"#FFFFFF"} title={"bubble-top"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="spinner-cub" bgColor={"#FFFFFF"} title={"spinner-cub"} color={'#FFFFFF'} size={100} />
            </div>
        </div>
        <div className={"row"}>
            <div className={"item"}>
                <Loader type="spinner-circle" bgColor={"#FFFFFF"} title={"spinner-circle"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="spinner-default" bgColor={"#FFFFFF"} title={"spinner-default"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="bubble-ping" bgColor={"#FFFFFF"} title={"bubble-ping"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="ekvalayzer" bgColor={"#FFFFFF"} title={"ekvalayzer"} color={'#FFFFFF'} size={100} />
            </div>
        </div>
        <div className={"row"}>
            <div className={"item"}>
                <Loader type="box-rectangular" bgColor={"#FFFFFF"} title={"box-rectangular"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="hourglass" bgColor={"#FFFFFF"} title={"hourglass"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="bubble-spin" bgColor={"#FFFFFF"} title={"bubble-spin"} color={'#FFFFFF'} size={100} />
            </div>
            <div className={"item"}>
                <Loader type="rectangular-ping" bgColor={"#FFFFFF"} title={"rectangular-ping"} color={'#FFFFFF'} size={100} />
            </div>
        </div>
        <div className={"row"}>
            <div className={"item"}>
                <Loader type="bubble-loop" bgColor={"#FFFFFF"} title={"bubble-loop"} color={'#FFFFFF'} size={100} />
            </div>
        </div>
    </div>

);