React Bootstrap Loader

React Loader - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Show code

        
            
            import React from "react";

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

            export default SpinnerPage;

Material loader MDB Pro component

Material Design styling for React Bootstrap Loader component

Show code

        
            
            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

Show code

        
            
            import React from "react";

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

            export default SpinnerPage;

Material loader MDB Pro component

Show code

        
            
              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!

Show code

        
            
            import React from "react";

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

            export default SpinnerPage;

Loader sizing

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

Default loader

Show code

        
            
            import React from "react";

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

                  <div className="spinner-border" role="status">
                    <span className="sr-only">Loading...</span>
                  </div>
                  <div className="spinner-grow" role="status">
                    <span className="sr-only">Loading...</span>
                  </div>
                </>
              );
            }

            export default SpinnerPage;

Material loader MDB Pro component

Show code

        
            
            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

Show code

        
            
            import React from "react";

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

            export default SpinnerPage;

Material loader MDB Pro component

Show code

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

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

            export default SpinnerPage;

React Loader - 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

Show code

javascript

        
            
          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" />`