reactstrap - Spinners

Black Lives Matter.

Spinners

import React from 'react';
import { Spinner } from 'reactstrap';

const Example = (props) => {
  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>
  );
}

export default Example;

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';

const Example = (props) => {
  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>
  );
}

export default Example;

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

Components