React-Bootstrap Spinner Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. Spinner Component provides a way to show the loading effect. We can use it to show the loading state, whenever required in our application. We can use the following approach in ReactJS to use the react-bootstrap Spinner Component.

Spinner Props:

• animation: It is used to define the type of animation for the spinner.
• as: It can be used as a custom element type for this component.
• children: It is used to wrap child elements or components, this component can be used.
• role: In the menu component, it is the ARIA accessible role applied to it.
• size: It is used to define the size of the component.
• variant: It is used to define the visual style of our spinner component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install react-bootstrap 
  npm install bootstrap

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Spinner from 'react-bootstrap/Spinner';

export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Spinner Component</h4>
      With Border Animation:
      <Spinner animation="border" variant="primary" /> <br/>
      With Grow Animation:
      <Spinner animation="grow" variant="warning" />
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: