React JS Loading Spinner Example Tutorial

In this tutorial, you will learn how to create loading a spinner in React JS application using Bootstrap spinner.

How to Implement Loading Spinner Button in React JS

Steps to implement loading spinner:

Step 1 – Create React App

Run the following command on your terminal to create a new react app:

npx create-react-app my-react-app

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

npm start

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

Step 2 – Install Bootstrap Spinner Package

Run the following command to install boostrap 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 – Add Component in App.js

In this step, you need to add the following code 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;

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

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

In this tutorial, you have learned how to implement a bootstrap button loading spinner in react js app.

Recommended React JS Posts