Spinners determine the loading state of our components. Designing one may require large amounts of code, effort, and time. But fortunately, we have the react-spinners-kit package with us.
react-spinners-kit module: React-spinners-kit provides a collection of loading spinners made from styled-components. We can use the react-spinners-kit and eliminate all the hassle of creating loading spinners by using a set of pre-made components.
Features:
- There are more than thirty different stylish loaders to choose from, including classic spinners, cubes, ping-pong, pulses, waves, hearts, spirals, etc.
- The spinners are customizable and easy to use.
- We can add different colors to the spinners.
- We can even specify the size of the spinners in px.
- The spinners can be positioned easily.
Props:
- loading: Each spinner takes a loading prop, set by default to true. Once a loading prop is passed as false, the spinner will not be rendered.
- size: Each spinner accepts a size number prop as a number to specify the size of the spinner in px.
- color: To specify the color of the spinner.
- frontColor and backColor: Some spinners accept two colors that are passed as strings for frontColor and backColor.
Let’s see how these spinners can be implemented into our project by looking at the following example:
Approach: We will use various different spinners in our project by using the react-spinners-kit module. We will add different colors and sizes to the spinners.
Step 1: Make a project directory, head over to the terminal, and create a react app named “spinner-kit” using the following command:
npx create-react-app spinner-kit
After the spinner-kit app is created, switch to the new spinner-kit using the following command:
cd spinner-kit
Step 2: After creating the React application, Install the react-spinner-kit package using the following command:
npm i react-spinners-kit
Installing react-spinners-kit
Step 3: Modify your project structure. We will modify the folder and keep the files we need for this project. Create a style.css file to style our component. Now, make sure your file structure looks like this :
Final Project Directory:
Final Project Directory
Step 4: Add code to your index.html file. Include the following code in your index.html file, located in the public folder of your project directory.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content= "Web site created using create-react-app" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> |
Step 7: Adding the various spinners from the react-spinner-kit in our App component.
We must integrate a spinner of our choice from a group of loaders provided by the react-spinner-kit into the project. Each spinner acts as a different component. I
In this example, we will use six different spinners, i.e. PushSpinner, TraceSpinner, RainbowSpinner, RingSpinner, SwishSpinner, PongSpinner, MetroSpinner, and JellyfishSpinner.
Firstly we will import all the spinner components to use in our project.
import { PushSpinner,TraceSpinner, RainbowSpinner, RingSpinner,SwishSpinner,
PongSpinner,MetroSpinner, JellyfishSpinner} from "react-spinners-kit";
To render the spinner components, we need to specify a loading state using the useState hooks. By default, it is set as true.
Then we will pass the loading, size, color, font color, and black color props in PushSpinner, TraceSpinner, RainbowSPinner, RingSpinner, SwishSpinner, PongSpinner, MetroSpinner, and JellyfishSpinner components and we are good to go.
Add the following code to App.js file
Javascript
import './App.css'; import './style.css'import { useState } from 'react'; import { PushSpinner, TraceSpinner, RainbowSpinner, RingSpinner, SwishSpinner, PongSpinner, MetroSpinner, JellyfishSpinner } from "react-spinners-kit"; function App() { const [loading, setLoading] = useState(true) return ( <> <p className='tag'>Spinners using react-spinners-kit</p> <div className="spinnerContainer"> <div className="spinner"> <PushSpinner size={30} color="#00ff89" loading={loading} /> </div> <div className="spinner"> <TraceSpinner size={40} frontColor="green" backColor="white" loading={loading} /> </div> <div className="spinner"> <RainbowSpinner size={50} color="purple" loading={loading} /> </div> <div className="spinner"> <RingSpinner size={50} color="yellow" loading={loading} /> </div> <div className="spinner"> <SwishSpinner size={40} frontColor="blue" backColor="white" loading={loading} /> </div> <div className="spinner"> <PongSpinner size={60} color="pink" loading={loading} /> </div> <div className="spinner"> <MetroSpinner size={40} color="white" loading={loading} /> </div> <div className="spinner"> <JellyfishSpinner size={40} color="grey" loading={loading} /> </div> </div> </> ); } export default App; |
Step 6: Let’s style our spinner-kit application. Add the following code in your style.css file.
style.css
CSS
.spinnerContainer { margin: auto; width: 50%; height: 50%; text-align: center; position: absolute; top: 50%; transform: translate(50%, -50%); background-color: black; display: flex; align-items: center; flex-direction: row; border-radius: 10px; flex-wrap: wrap; box-shadow: 0px 8px 8px rgba(23, 22, 22, 0.296); } .spinner { margin: 5%; padding: 20px; border: 1px solid rgb(55, 53, 53); } .tag { text-align: center; font-size: 2rem; color: green; } |
Step 7: Your index.js file should look like this. The index.js file serves as the main entry point, and inside it the App.js file is rendered at the root ID of the DOM.
Javascript
import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root")); root.render(<App />); |
Step to run the application: Run the application by using the following command:
npm start
Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. This is how our project looks.
Output : Spinners using react-spinners-kit
Reference: https://www.npmjs.com/package/react-spinners-kit
