Spinners

import React from 'react';
import { Spinner } from 'reactstrap';
export default class Example extends React.Component {
  render() {
    return (
      <div>
        <Spinner color="primary" />
        <Spinner color="secondary" />
        <Spinner color="success" />
        <Spinner color="danger" />
        <Spinner color="warning" />
        <Spinner color="info" />
        <Spinner color="light" />
        <Spinner color="dark" />
      </div>
    );
  }
}

Properties

Spinner.propTypes = {
  type: PropTypes.string, // default: 'border'
  size: PropTypes.string,
  color: PropTypes.string,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  children: PropTypes.string, // default: 'Loading...'
};

Growing Spinner

import React from 'react';
import { Spinner } from 'reactstrap';
export default class Example extends React.Component {
  render() {
    return (
      <div>
        <Spinner type="grow" color="primary" />
        <Spinner type="grow" color="secondary" />
        <Spinner type="grow" color="success" />
        <Spinner type="grow" color="danger" />
        <Spinner type="grow" color="warning" />
        <Spinner type="grow" color="info" />
        <Spinner type="grow" color="light" />
        <Spinner type="grow" color="dark" />
      </div>
    );
  }
}

Sizes

<Spinner size="sm" color="primary" />{' '}
<Spinner size="sm" color="secondary" />

<Spinner style={{ width: '3rem', height: '3rem' }} />{' '}
<Spinner style={{ width: '3rem', height: '3rem' }} type="grow" />