Spinner

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

Spinner Types

import React from "react";
import { CDBSpinner, CDBContainer } from "cdbreact";
export const Spinner = () => {
  return (
    <CDBContainer>
          <CDBSpinner />
          <CDBSpinner danger />
          <CDBSpinner success />
          <CDBSpinner warning />
          <CDBSpinner info />
          <CDBSpinner dark />
          <CDBSpinner secondary />
    </CDBContainer>
  );
};

Multicolor Spinner

import React from "react";
import { CDBSpinner, CDBContainer } from "cdbreact";
export const Spinner = () => {
  return (
    <CDBContainer>
          <CDBSpinner multicolor />
    </CDBContainer>
  );
};

Size Variations

import React from "react";
import { CDBSpinner, CDBContainer } from "cdbreact";
export const Spinner = () => {
  return (
    <CDBContainer>
          <CDBSpinner size="big" />
          <CDBSpinner secondary />
          <CDBSpinner success size="small" />
    </CDBContainer>
  );
};

API

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

Contrast Spinner Import Statement

You need to import the Contrast Spinner component first before using it.

import { CDBSpinner } from "cdbreact";

API Reference: Contrast Spinner Properties

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