ReactJS MDBootstrap Spinner Component

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Spinner Component in ReactJS MDBootstrap. Spinners are used to indicate the loading state of the component.

Properties:

• tag: It is used to define the tag of the component.
• color: It is used to define the color of the component.
• className: It is used to add a custom class to the component.
• size: It is used to set the size of the spinner.
• grow: It is used to make a growing spinner.

Syntax:

<MDBSpinner></MDBSpinner >

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: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBSpinner  } from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

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

npm start

Example 1: This is the basic example that shows how to use Spinner Component.

App.js

import React from "react";
import { MDBSpinner } from "mdb-react-ui-kit";

export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spinner component</h4>

            <MDBSpinner color='success' role='status'>
            </MDBSpinner>
            <br />
            <MDBSpinner color='danger' grow>
            </MDBSpinner>
        </div>
    );
}

Output:

Example 2: In this example, we will know how to use the size property in a spinner component

App.js

import React from "react";
import { MDBSpinner } from "mdb-react-ui-kit";

export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spinner component</h4>

            <MDBSpinner color='success' size='sm' role='status'>
            </MDBSpinner>
            <br />
            <MDBSpinner color='danger' size='sm' grow>
            </MDBSpinner>
        </div>
    );
}

Output:

Example 3: In this example, we will know how to add buttons in a spinner component.

App.js

import React from "react";
import { MDBSpinner, MDBBtn } from "mdb-react-ui-kit";

export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spinner component</h4>

            <MDBBtn color='danger' className='me-3'>
                <MDBSpinner color='success' size='sm'
                    role='status'>
                </MDBSpinner>
            </MDBBtn>
            <MDBBtn color='success' >
                <MDBSpinner color='danger' size='sm' grow>
                </MDBSpinner>
            </MDBBtn>
        </div>
    );
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/components/spinners/