Answers for "react spinkit"

react-spinners

import { ClipLoader, BarLoader, BeatLoader, BounceLoader, CircleLoader, ClimbingBoxLoader } from "react-spinners";
function App() {
  return (
    <div style={{ alignItems: "center", display: "flex" }}>
      <CircleLoader />
      <ClimbingBoxLoader />
      <BounceLoader />
      <BeatLoader />
      <BarLoader />
      <ClipLoader />
    </div>
  );
}
export default App;

react spinners

// ##### Installation #####
  // npm install --save react-spinners

// ##### Installation #####
  // https://www.davidhu.io/react-spinners

// ##### 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;

react spinkit

$ npm install react-spinkit --save