@mdhnpm/react-cube-loading-spinner
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

React Cube Loading Spinner

Super cool configurable cube loading spinner for react. There are 4 configurable options. With TypeScript support.

props purpose
mainColor Main color of the cube. It takes any CSS color values (color name, hex, rgb).
secondaryColor Secondary color of the cube
spinnerInnerHeight Height of the inner spinner in pixel. The dimension will be spinnerInnerHeight times 3.
spinnerSpeed Speed of the spinner rotation in second (e.g. 1.5).

Usage

Import the module.

import { CubeLoadingSpinner } from "@mdhnpm/cube-loading-spinner";

We can configure the spinner. Note that when spinnerInnerHeight is 9, the dimension of the cube will be 27 x 27 x 27px.

<CubeLoadingSpinner
  mainColor="black"
  secondaryColor="gray"
  spinnerInnerHeight={9}
  spinnerSpeed={1.5}
/>

The props are optional. If you don't pass any prop, you can get a default spinner.

<CubeLoadingSpinner />

And this is what it looks like...

spinner gif

Enjoy 🤟💀🤟

Package Sidebar

Install

npm i @mdhnpm/react-cube-loading-spinner

Weekly Downloads

1

Version

2.1.1

License

MIT

Unpacked Size

229 kB

Total Files

34

Last publish

Collaborators

  • mdhnpm