How To Setup react-spinners .

Installation

With npm:

npm install --save react-spinners

Usage

Each loader has its 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;

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

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