Rate these docs

React Bootstrap Loader/Spinner

React Loader/Spinner - Bootstrap 4 & Material Design

React Bootstrap loader is animation that is used to keep visitors entertained while the page is still loading, which helps to increase the user experience.


Default loader

Default styling for React Bootstrap Loader component

Loading...

            import React from "react";

            const SpinnerPage = () => {
              return (
                <>
                  <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;
          

Material loader MDB Pro component

Material Design styling for React Bootstrap Loader component


            import React from "react";
            import { MDBSpinner } from 'mdbreact';

            const SpinnerPage = () => {
              return (
                <>
                  <MDBSpinner />
                </>
              );
            }

            export default SpinnerPage;
          

Loader colors

The default spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.

Default loader

Loading...
Loading...
Loading...
Loading...
Loading...

            import React from "react";

            const SpinnerPage = () => {
              return (
                <>
                  <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-border text-success" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-border text-danger" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-border text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-border text-info" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;
          

Material loader MDB Pro component


              import React from "react";
              import { MDBSpinner } from 'mdbreact';
  
              const SpinnerPage = () => {
                return (
                  <>
                    <MDBSpinner red />
                    <MDBSpinner />
                    <MDBSpinner yellow />
                    <MDBSpinner green />
                    <MDBSpinner multicolor />
                  </>
                );
              }
  
              export default SpinnerPage;
          

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.


Growing loader

If you don't fancy a border spinner, switch to the growing loader. While it doesn't technically spin, it does repeatedly grow!

Loading...
Loading...
Loading...
Loading...
Loading...

            import React from "react";

            const SpinnerPage = () => {
              return (
                <> 
                  <div class="spinner-grow text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-success" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-danger" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-info" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;
          

Loader sizing

You can set different sizes of loader, both default and material ones.

Default loader

Loading...
Loading...
Loading...
Loading...

            import React from "react";

            const SpinnerPage = () => {
              return (
                <>
                  <div class="spinner-border spinner-border-sm" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow spinner-grow-sm" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
          
                  <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;
          

Material loader MDB Pro component


            import React from "react";
            import { MDBSpinner } from 'mdbreact';

            const SpinnerPage = () => {
              return (
                <>
                  <MDBSpinner big />
                  <MDBSpinner />
                  <MDBSpinner small />
                </>
              );
            }

            export default SpinnerPage;
          

Loader speed

You can also set different speed of loader, both default and material ones.

Default loader

Loading...
Loading...

            import React from "react";

            const SpinnerPage = () => {
              return (
                <>
                  <div class="spinner-border fast" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow fast ml-3" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;
          

Material loader MDB Pro component


            import React from "react";
            import { MDBSpinner } from 'mdbreact';

            const SpinnerPage = () => {
              return (
                <>
                  <MDBSpinner crazy />
                </>
              );
            }

            export default SpinnerPage;
          

Note: We can help you build your project.
learn more

React Loader/Spinner - API

In this section you will find advanced information about the Spinner component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


        import { MDBSpinner } from 'mdbreact';
      

API Reference: Spinner Properties

The table below shows the configuration options of the MDBSpinner component.

Name Type Default Description Example
big Boolean false Increases the size of spienner to 4rem in diameter - normal size is 3rem in diameter <MDBSpinner big />
className String Sets custom classes <MDBSpinner className="card" />
crazy Boolean false Accelerates up the spinner to the crazy limits of speed <MDBSpinner crazy />
green Boolean false Sets green color of the spinner (blue by default) <MDBSpinner green />
multicolor Boolean false Spinner changes color after every cycle <MDBSpinner multicolor />
red Boolean false Sets red color of the spinner (blue by default) <MDBSpinner red />
small Boolean false Lowers the size of spienner to 2.25rem in diameter - normal size is 3rem in diameter <MDBSpinner big />
yellow Boolean false Sets yellow color of the spinner (blue by default) <MDBSpinner yellow />
tag String div Changes default tag <MDBSpinner tag="div" />