包详细信息

react-js-loader

AmurKhoyetsyan4.8kMIT0.1.3

animation loader and spinner for react js

spinner, loader, react-js-loader, react-js-spinner

自述文件

React-js-loader

demo page

Install

npm i react-js-loader

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>
);