1// ##### Installation #####
2  // npm install --save react-spinners
3
4// ##### Installation #####
5  // https://www.davidhu.io/react-spinners
6
7// ##### Example #####
8import { useState } from "react";
9import { css } from "@emotion/react";
10import ClipLoader from "react-spinners/ClipLoader";
11
12// Can be a string as well. Need to ensure each key-value pair ends with ;
13const override = css`
14  display: block;
15  margin: 0 auto;
16  border-color: red;
17`;
18
19function App() {
20  let [loading, setLoading] = useState(true);
21  let [color, setColor] = useState("#ffffff");
22
23  return (
24    <div className="sweet-loading">
25      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
26      <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
27
28      <ClipLoader color={color} loading={loading} css={override} size={150} />
29    </div>
30  );
31}
32
33export default App;

1import { ClipLoader, BarLoader, BeatLoader, BounceLoader, CircleLoader, ClimbingBoxLoader } from "react-spinners";
2function App() {
3  return (
4    <div style={{ alignItems: "center", display: "flex" }}>
5      <CircleLoader />
6      <ClimbingBoxLoader />
7      <BounceLoader />
8      <BeatLoader />
9      <BarLoader />
10      <ClipLoader />
11    </div>
12  );
13}
14export default App;

1$ npm install react-spinkit --save