React Spinners

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

This package is bootstraped using react-npm-boilerplate

Demo

Demo Page

Installation

npm install react-spinners --save

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 not render anything if loading is false. The loading prop defaults to true.

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

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

Examples

import React from "react";
import { css } from "@emotion/core";
// First way to import
import { ClipLoader } from "react-spinners";
// Another way to import. This is recommended to reduce bundle size
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} // or 150px
          color={"#123abc"}
          loading={this.state.loading}
        />
      </div>
    );
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

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

Color prop accepts a color hash. It also accepts basic colors. This is the list of colors accepted:

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

Note: 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

For size, height, width, and radius props, the input 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.