react-spinners
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    React Spinners

    npm version circle ci downloads license Coverage Status

    dependencies Status devDependencies Status peerDependencies Status

    A collection of loading spinners with React.js based on Halogen.

    This package is bootstraped using react-npm-boilerplate

    Demo

    Demo Page

    Installation

    With Yarn:

    yarn add react-spinners

    With npm:

    npm install --save react-spinners

    Usage

    Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

    Each loader accepts a loading prop as a boolean. The loader will render null if loading is false.

    IMPORTANT: This package uses emotion. Remember to add the plugin to .babelrc, for example:

    {
        "presets": ["@babel/preset-react", "@babel/preset-env"],
        "plugins": ["@emotion"]
    }
    

    Example

    import { useState } from "react";
    import { css } from "@emotion/react";
    import ClipLoader from "react-spinners/ClipLoader";
    
    // Can be a string as well. Need to ensure each key-value pair ends with ;
    const override = css`
      display: block;
      margin: 0 auto;
      border-color: red;
    `;
    
    function App() {
      let [loading, setLoading] = useState(true);
      let [color, setColor] = useState("#ffffff");
    
      return (
        <div className="sweet-loading">
          <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
          <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
    
          <ClipLoader color={color} loading={loading} css={override} size={150} />
        </div>
      );
    }
    
    export default App;
    Example using React Class
    import React from "react";
    import { css } from "@emotion/react";
    import ClipLoader from "react-spinners/ClipLoader";
    
    // Can be a string as well. Need to ensure each key-value pair ends with ;
    const override = css`
      display: block;
      margin: 0 auto;
      border-color: red;
    `;
    
    class AwesomeComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          loading: true
        };
      }
    
      render() {
        return (
          <div className="sweet-loading">
            <ClipLoader css={override} size={150} color={"#123abc"} loading={this.state.loading} speedMultiplier={1.5} />
          </div>
        );
      }
    }

    Available Loaders, PropTypes, and Default Values

    Common default props for all loaders:

    loading: true;
    color: "#000000";
    css: "";
    speedMultiplier: 1;

    color prop

    color prop accepts a color hash in the format of #XXXXXX or #XXX. It also accepts basic colors listed below:

    maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver

    css prop

    css works exactly like the css works with the emotion package. You can directly write your css in css syntax without the dirty camelCase css in jss syntax. We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream! More info about using css here

    size, height, width, and radius props

    The input to these props can be number or string.

    • If value is number, the loader will default to css unit px.
    • If value is string, the loader will verify the unit against valid css units.
      • If unit is valid, return the original value
      • If unit is invalid, output warning console log and default to px.

    The table below has the default values for each loader.

    Loader size height width radius margin
    BarLoader 4 100
    BeatLoader 15 2
    BounceLoader 60
    CircleLoader 50
    ClimbingBoxLoader 15
    ClipLoader 35
    ClockLoader 50
    DotLoader 60 2
    FadeLoader 15 5 2 2
    GridLoader 15
    HashLoader 50 2
    MoonLoader 60 2
    PacmanLoader 25 2
    PropagateLoader 15
    PuffLoader 60
    PulseLoader 15 2
    RingLoader 60 2
    RiseLoader 15 2
    RotateLoader 15 2
    ScaleLoader 35 4 2 2
    SyncLoader 15 2

    Install

    npm i react-spinners

    DownloadsWeekly Downloads

    124,620

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    171 kB

    Total Files

    64

    Last publish

    Collaborators

    • avatar