Skip to content
Related Articles

Related Articles

ReactJS MDBootstrap Spinner Component

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 10 Jan, 2022

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.

Project Structure

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:

ReactJS MDBootstrap Spinner Component

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:

ReactJS MDBootstrap Spinner Component

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:

ReactJS MDBootstrap Spinner Component

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!