How to Implement Loading Spinner Button in React

Last updated on: by Editorial Team

Throughout this quick tutorial, you will ascertain the best possible and easy way to add the loading spinner button in React js application using the Bootstrap CSS package.

Sometimes, you trigger an action, while the process is going on behind the curtains at that time, we show some progress indication to the users; this is known as loaders or loading spinners.

In this react loading button tutorial, we will help you understand how to create a loader spinner button in react using the react-bootstrap package. The React bootstrap offers tons of UI components, out of which button loading spinner is one; it saves your time and prevents you from reinventing the wheel.

To set the loading state in react button, you can use the spinners. Spinners can be added to React button quickly, and there are primarily two types of loading spinners bootstrap offers, grow and circle spinner, and they are available in various colors.

We will create a simple loading button with a spinner in react using the react-bootstrap loading button component.

Create React App

First, download the react app using the below command; if you have already created the app, jump on to the next step.

npx create-react-app my-react-app

Install Bootstrap Package

The npm provides the more straightforward way to add React-Bootstrap in react app, and you may also take the help of yarn if you want.

npm install react-bootstrap bootstrap

Import Button, Spinner Component

Next, you have to import the Button, Spinner component individually in the react component.

import { Button, Spinner } from 'react-bootstrap'

To style the button, use the bootstrap css, so also import the bootstrap CSS.

import 'bootstrap/dist/css/bootstrap.min.css';

React Bootstrap 4 Loading Spinner Button Example

After taking the necessary steps, we are now able to add the loading spinner in Button using React Bootstrap, define the Button directive as a wrapper around Spinner component.

You can customize react loading button using the custom properties offered by React bootstrap spinner component.

import React from 'react'

import { Button, Spinner } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component{

    render(){
        return(
            <div>
                <Button variant="dark" disabled>
                    <Spinner
                    as="span"
                    variant="light"
                    size="sm"
                    role="status"
                    aria-hidden="true"
                    animation="border"/>
                      Loading...
                </Button>
            </div>
        )
    }
    
}

export default App;

You can also change the spinner animation type and show a slightly different animated Spinner in React with react-bootstrap.

import React from 'react'

import { Button, Spinner } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component{

    render(){
        return(
            <div>
                <Button variant="primary" disabled>
                    <Spinner
                    as="span"
                    variant="warning"
                    size="sm"
                    role="status"
                    aria-hidden="true"
                    animation="grow"/>
                      Loading...
                </Button>
            </div>
        )
    }
    
}

export default App;

Start Application

Next, run the command, start the app and view the loading spinner in react.

npm start
http://localhost:3000

Show Loading Button in React

Conclusion

This small guide eloquently explained the confluence of the button and a loading spinner, especially we learned how to use the react-bootstrap button and spinner component to create a loading button, which shows the spinner or loader in a disabled state when the user clicks on it.

Furthermore, we looked at react spinners, such as their types and how to use them in react; we expect you will easily integrate the spinner in your future project.