Learn To Add Loading Spinner Button in React

Friends, in this tutorial, we will quickly learn to add the loading spinner button in React js application using the Bootstrap CSS package in the best possible and quite an easy manner.

Many times, it happens when the user triggers an action, then some process goes on behind the curtains. At that time, the user sees the progress indicator which we call loaders or loading spinners.

In addition, in this tutorial, we will get to know how to implement the loading spinner button in React using the Racet Bootstrap Package. The button loading spinner is one out of many UI components of the React Bootstrap. This saves the time and effort of the user.

It is quite easy and quick to add spinners to a React button. The bootstrap offers mainly two types of loading spinners. Those are called grow and circle spinners. These are available in many different colors.

Now, Let’s Learn in Detail

Creating the React App– First of all, we create the React app by using the below-given command. Move onto the next step if you have already done so.

npx create-react-app loadingspinner-react-app

 

Installing the Bootstrap Package- Next is to add the React-bootstrap for which the npm provides quite a straightforward way. We can also use the yarn for the purpose.

npm install react-bootstrap bootstrap

 

Import Button, Spinner Component- The third step is to import Button, Spinner component individually in the React component.

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

For styling the button, we import bootstrap CSS since we use bootstrap CSS for this.

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

 

React Bootstrap 4 Loading Button Spinner Example- Now, we reach the step of adding the loading spinner in Button using React Bootstrap, define the Button directive as a wrapper around the spinner component.

We can also use the custom properties offered by React Bootstrap spinner component for customizing the React loading button.

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;

It is also possible to change the spinner animation type and we can 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;

 

Running the Application- Lastly, we reach the end where we have to run the command and start the app. Now, we can view the loading spinner in React.

npm start

Conclusion

So, we have tried to explain things in a persuasive manner. Hope that you have learned quite well the confluence of Button and the Loading Spinner. In addition, it has been understood how to use the React-Bootstrap Button and a spinner component for creating a loading button that shows the spinner or loader as disabled when the user clicks on it.

We have also learned the types of spinners and how to use them in React.

 

Thanks