DOCSEARCHbyAlgolia
Submit Docs

react-spinners

repository·main·Indexed 25 days ago

https://github.com/davidhu2000/react-spinners

A collection of various React loading spinner components, including ClipLoader, BarLoader, and RingLoader, that can be easily integrated into React applications. Version 0.17.0 provides customizable loaders with props for color, size, speedMultiplier, and cssOverride.

Tokens
1.9K
Snippets
3
Records
10
Agent score
84%

What's inside react-spinners

  2. Use react-spinners loaders

    main

    Import a specific loader component (e.g., ClipLoader) from react-spinners. Each loader accepts a loading prop (boolean); if false, the loader renders null. You can customize loaders by passing props to overwrite their default values.

    import { useState, CSSProperties } from "react";
import { ClipLoader } from "react-spinners";

const override: CSSProperties = {
  display: "block",
  margin: "0 auto",
  borderColor: "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}
        cssOverride={override}
        size={150}
        aria-label="Loading Spinner"
        data-testid="loader"
      />
    </div>
  );
}

export default App;

  4. Configure the color prop

    main

    The color prop accepts a color hash in the format of #XXXXXX or #XXX. It also accepts the following basic color names:

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

  5. Configure size, height, width, and radius props

    main

    The size, height, width, and radius props accept either a number or a string:

    • Number: The value is treated as the CSS unit px.
    • String: The value is verified against valid CSS units. If the unit is valid, the original value is used. If the unit is invalid, a warning is logged to the console and it defaults to px.

  6. Common props for all loaders

    main

    All loaders in react-spinners share these common props:

    • loading: true (boolean)
    • color: #000000 (string)
    • cssOverride: {} (object)
    • speedMultiplier: 1 (number)

    Additionally, all valid HTML props such as aria-* and data-* props are fully supported.

  7. Reference default values for loaders

    main

    The following table lists the default values for size, height, width, radius, and margin for each available loader.

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

  8. Import loading spinner components from react-spinners

    main

    The react-spinners package provides a variety of pre-built loading spinner components. You can import any of the following components directly from the main entry point:

    • BarLoader
    • BeatLoader
    • BounceLoader
    • CircleLoader
    • ClimbingBoxLoader
    • ClipLoader
    • ClockLoader
    • DotLoader
    • FadeLoader
    • GridLoader
    • HashLoader
    • MoonLoader
    • PacmanLoader
    • PropagateLoader
    • PulseLoader
    • PuffLoader
    • RingLoader
    • RiseLoader
    • RotateLoader
    • ScaleLoader
    • SkewLoader
    • SquareLoader
    • SyncLoader

  9. Configure loader dimensions and size

    main

    Spinners support different ways to define their dimensions using LengthType (which accepts number or string, such as 20 or '20px'). Depending on the specific loader component, you can use the following props:

    • Height and Width: Use height and width to set specific dimensions.
    • Size: Use size to set a uniform dimension.
    • Radius: Use radius to define the corner radius.
    • Margin: Use margin to define the spacing around the loader.

  10. Configure common spinner props

    main

    All loaders in react-spinners share a set of common configuration props. These allow you to control the visual appearance, visibility, and animation speed of the spinner.

    • color: A string representing the color of the spinner (e.g., #ffffff or red).
    • loading: A boolean to determine if the spinner should be rendered/active.
    • cssOverride: A CSSProperties object used to apply custom inline styles to the spinner element.
    • speedMultiplier: A number to scale the animation speed of the loader.