Spinner

Indicate the loading state of a component or page with React spinners.

Usage

Example

Script


  return (
    <div className="d-flex justify-content-between align-items-center">
      <CSpinner color="success" size="sm" />
      <CSpinner color="info" />
      <CSpinner
        color="primary"
        style={{width:'4rem', height:'4rem'}}
      />
      <CSpinner size="sm" variant="grow" />
      <CSpinner color="warning" variant="grow" />
      <CSpinner
        style={{width:'4rem', height:'4rem'}}
        color="danger"
        variant="grow"
      />
    </div>
  )

# Features

Spinning and grow effect
Fully customizable size
Screen readers friendly

# Spinner API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
grow	boolean
grow type
size	string
set size of the spinner. Default available sizes: 'sm'
color	string
color of the component