React Spinner Kit

A lightweight, customizable React spinner package with multiple spinner types. By default, it includes a circle spinner and a dot spinner, but you can easily extend it to add more spinners as needed.

---

Installation

You can install the react-spinner-kit package via npm or yarn.

npm:

1npm install react-spinner-kit
2
3yarn:
4yarn add react-spinner-kit
5
6
7Usage
8After installing the package, you can import and use the spinner component in your React project.
9Basic Usage
10
11import React from 'react';
12import Spinner from 'react-spinner-kit';
13
14const App = () => {
15  return (
16    <div style={{ textAlign: 'center', marginTop: '100px' }}>
17      <Spinner color="#007bff" size={40} />
18    </div>
19  );
20};
21
22export default App;
23
24By default, the spinner will render a circle spinner.
25
26
27Spinner Types
28The spinner component supports the following spinner types:
29
30circle (default)
31
32dots
33
34You can change the spinner type by passing the type prop.
35
36Example:
37
38import React, { useState } from 'react';
39import Spinner from 'react-spinner-kit';
40
41const App = () => {
42  const [spinnerType, setSpinnerType] = useState('dots');
43
44  return (
45    <div style={{ textAlign: 'center', marginTop: '100px' }}>
46      <button onClick={() => setSpinnerType('dots')}>Dots Spinner</button>
47      <button onClick={() => setSpinnerType('circle')}>Circle Spinner</button>
48
49      <Spinner type={spinnerType} color="#007bff" size={40} />
50    </div>
51  );
52};
53
54export default App;
55
56
57Customizing the Spinner
58You can customize the spinner's appearance by passing the following props:
59
60color: Sets the spinner's color (default: #000).
61
62size: Sets the spinner's size (default: 40px).
63
64type: The spinner type. Options are circle (default) and dots.
65
66Example Usage:
67tsx
68Copy
69Edit
70
71
72<Spinner type="dots" color="#ff5733" size={50} />
73<Spinner type="circle" color="#28a745" size={60} />
74
75Available Props
76
77Prop | Type | Default Value | Description
78color | string | #000 | The color of the spinner.
79size | number | 40 | The size of the spinner in pixels.
80type | string | circle | The spinner type. Options are circle and dots.
81
82Additional Notes
83Circle Spinner: A spinning circle with a border and animated rotation.
84
85Dots Spinner: A set of dots that bounce in and out, creating a loading effect.
86
87CSS Animations
88Ensure the following animations are included globally or in your project's CSS file
89
90
91@keyframes spin {
92  0% { transform: rotate(0deg); }
93  100% { transform: rotate(360deg); }
94}
95
96@keyframes bounce {
97  0%, 80%, 100% { transform: scale(0); }
98  40% { transform: scale(1); }
99}
100
101
102Extending with New Spinners
103To add more spinners in the future, simply create a new spinner component (like Circle or Dots), and update the Spinner.tsx file to include the new component in the components object. The Spinner component will automatically render the new spinner type when specified.
104
105
106License
107MIT License. See LICENSE for more details.
108
109