How to add a loading spinner in React
Today, we will show you how to add a loading spinner in React. In this article, we will use the NPM package which uses pure CSS to display the loader.
Checkout more articles on ReactJS
Demo Application
Steps to add a loading spinner in React
1. Install NPM package
Here, we will use the react-spinkit NPM package to implement the loader. Run the following command to install the package.
1 | npm i react-spinkit |
2. Add spinner in component
To add the spinner, we have to simply import the component and render the element as below.
1 2 3 4 5 | // import package import Spinner from 'react-spinkit'; // render element <Spinner name="double-bounce" /> |
The following are the properties of the spinner.
- name — specify spinner to use (defaults to
three-bounce). - fadeIn — set the time before the spinner fades in.
- overrideSpinnerClassName — change the default
sk-spinnerclassName. - className — add a custom class name to the outer div.
- color — programmatically set the color of the spinners; this can either be a hex value or a color word.
Let’s add a few spinners in the React component.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import React from 'react'; import Spinner from 'react-spinkit'; function App() { return ( <div className="app"> <h4>Add a loading spinner in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4> <div className="spinner-outer"> <Spinner name="double-bounce" /> <Spinner name="circle" /> <Spinner name="cube-grid" /> <Spinner name="line-scale" color="steelblue" /> </div> </div> ); } export default App; |
3. Output
Run the application and check the output in the browser. See more examples on the demo page.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
