Rate this 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



            <div class="loader"></div>

          

Material loader MDB Pro component

Material Design styling for React Bootstrap Loader component



            <Spinner big />

          

Loader sizing

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

Default loader



            <div class="loader"></div>

            <div class="loader medium"></div>

            <div class="loader small"></div>

          

Material loader MDB Pro component



            <Spinner big />

            <Spinner />

            <Spinner small />

          

Loader speed

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

Default loader



            <div class="loader fast"></div>

          

Material loader MDB Pro component



            <Spinner crazy big />

          

Loader colors

For default loader, you can use one of our 9 default colors for loader border top. Use one of the following classes:

  • border-top-primary
  • border-top-secondary
  • border-top-default
  • border-top-danger
  • border-top-warning
  • border-top-success
  • border-top-info
  • border-top-dark
  • border-top-light

Default loader



            <div class="loader border-top-danger"></div>

            <div class="loader border-top-info"></div>

            <div class="loader border-top-warning"></div>

            <div class="loader border-top-success"></div>

          

Material loader MDB Pro component



            <Spinner red />

            <Spinner />

            <Spinner yellow />

            <Spinner green />

          

Multicolor loader

Another possibility for default loader to use is to combine 4 different classes and create your own multicolor loader. For this, use one of each "top", "right", "bottom", "left" color classes:

  • border-top-primary
  • border-top-danger
  • border-top-warning
  • border-top-success
  • border-top-info
  • border-top-default
  • border-top-secondary
  • border-top-dark
  • border-top-light
  • border-right-primary
  • border-right-danger
  • border-right-warning
  • border-right-success
  • border-right-info
  • border-right-default
  • border-right-secondary
  • border-right-dark
  • border-right-light
  • border-bottom-primary
  • border-bottom-danger
  • border-bottom-warning
  • border-bottom-success
  • border-bottom-info
  • border-bottom-default
  • border-bottom-secondary
  • border-bottom-dark
  • border-bottom-light
  • border-left-primary
  • border-left-danger
  • border-left-warning
  • border-left-success
  • border-left-info
  • border-left-default
  • border-left-secondary
  • border-left-dark
  • border-left-light

Default loader



            <div class="loader border-top-primary border-right-warning border-bottom-success border-left-danger"></div>

          

Material loader MDB Pro component



            <Spinner big multicolor />

          

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