Loading Spinner in React JS

React js button loading spinner example. In this tutorial, i am going to show you how to add bootstrap loading spinner in react js app with bootstrap 4.

How to Add Loading Spinner Button in React JS App

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4 Spinner Package
• Step 3 – Add Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap 4 Spinner Package

Execute the following command to install boostrap 4 spinner library into your react app:

npm install bootstrap --save
npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

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

Step 3 – Import Component in App.js

Import above created component into src/App.js file:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Spinner } from 'react-bootstrap'
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;

Want to modify the spinner animation type and display a different types of animated Spinner in React app usingreact-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;

If you want to customize react loading button. So, you can visit this link spinner component. And find more options for react loading spinner.

Conclusion

React js button loading spinner example. In this tutorial, you have learned how to implement bootstrap button loading spinner in react js app using bootstrap 4.

Recommended React JS Tutorial