How to create a bootstrap spinner in ReactJS?

React bootstrap is a component-based library that provides bootstrap features as react components, Today, We will learn how to create a bootstrap spinner in ReactJS, Spinner is used to show a loading state in the project, We show the loading state when the task is still running and show the animation loader so user can know the task is running and it will complete soon.

You can download/clone the working example https://github.com/technostuf/react-bootstrap-spinner

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command. Open your terminal and move to your project folder and run the below command.

 npx create-react-app react-bootstrap-spinner

The above command will create a new folder with the app name so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-spinner

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn. the following command will install react-bootstrap and bootstrap package into the application. if you have already installed then skip it.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file SpinnerComponent.js, and import it into App.js. We have created this separate to demonstrate a spinner with different styles.

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

const SpinnerComponent = () => {
    return (
        <div>
            <div class="row d-flex justify-content-center text-center">
                <h1>React bootstrap spinner component - technostuf.com</h1>
                <hr />
                <div className="col-md-8">
                    <h4>Spinners with Animations</h4>
                    <p>Border Style: <Spinner animation="border" /></p>
                    <p>Grow Style: <Spinner animation="grow" /></p>
                </div>
                <div className="col-md-8">
                    <h4>Spinners with different variants(colors)</h4>
                    <p>Primary Style: <Spinner animation="border" variant="primary" /></p>
                    <p>Secondary Style: <Spinner animation="border" variant="secondary" /></p>
                </div>
                <div className="col-md-8">
                    <h4>Spinners with button</h4>
                    <Button variant="dark" disabled>
                        <Spinner
                            as="span"
                            animation="border"
                            variant="light"
                            size="sm"
                            role="status"
                            aria-hidden="true"
                        />
                        &nbsp;Submit
                        <span className="visually-hidden">Loading...</span>
                    </Button>
                </div>
            </div>
        </div>
    )
}
export default SpinnerComponent;

Spinners with Animations

ReactJS Bootstrap offers two types of animation, animation can be configured with the animation property, Example is given in the SpinnerComponent.js file

Border Spinner
Grow Spinner

Spinners with button

A spinner can be also used with a button, We can show the spinner when something is processing, When you use the spinner component inside the button add the as=”span” in the spinner component

Spinners with different variants(colors)

Change the spinner color by using variant property, Spinner supports the following property: primary, secondary, success, danger, warning, info, light, dark.

Finally, you have to import both files into App.js.

import './App.css';
import SpinnerComponent from './SpinnerComponent';

function App() {
  return (
    <div className="App">
      <SpinnerComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download/clone the working example.

https://github.com/technostuf/react-bootstrap-spinner