React-js-loader

demo page

Install

npm i react-js-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 | | ping-cube | | heart | | bubble-scale | | bubble-top | | bubble-ping | | bubble-spin | | 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={"content"}>
            <div className={"zoom-out"}>
            <ColorBar setColor={color => setColor(color)} />
            <div className={"row"}>
                <div className={"item"}>
                    <Loader type="box-rotate-x" bgColor={color} color={color} title={"box-rotate-x"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="box-rotate-y" bgColor={color} color={color} title={"box-rotate-y"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="box-rotate-z" bgColor={color} color={color} title={"box-rotate-z"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="box-up" bgColor={color} color={color} title={"box-up"} size={100} />
                </div>
            </div>
            <div className={"row"}>
                <div className={"item"}>
                    <Loader type="bubble-scale" bgColor={color} color={color} title={"bubble-scale"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="heart" bgColor={color} color={color} title={"heart"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="bubble-top" bgColor={color} color={color} title={"bubble-top"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="spinner-cub" bgColor={color} color={color} title={"spinner-cub"} size={100} />
                </div>
            </div>
            <div className={"row"}>
                <div className={"item"}>
                    <Loader type="spinner-circle" bgColor={color} color={color} title={"spinner-circle"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="spinner-default" bgColor={color} color={color} title={"spinner-default"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="bubble-ping" bgColor={color} color={color} title={"bubble-ping"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="ekvalayzer" bgColor={color} color={color} title={"ekvalayzer"} size={100} />
                </div>
            </div>
            <div className={"row"}>
                <div className={"item"}>
                    <Loader type="box-rectangular" bgColor={color} color={color} title={"box-rectangular"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="hourglass" bgColor={color} color={color} title={"hourglass"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="bubble-spin" bgColor={color} color={color} title={"bubble-spin"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="rectangular-ping" bgColor={color} color={color} title={"rectangular-ping"} size={100} />
                </div>
            </div>
            <div className={"row"}>
                <div className={"item"}>
                    <Loader type="bubble-loop" bgColor={color} color={color} title={"bubble-loop"} size={100} />
                </div>
                <div className={"item"}>
                    <Loader type="ping-cube" bgColor={color} color={color} title={"ping-cube"} size={100} />
                </div>
            </div>
        </div>
    </div>
</div>
);