Reactstrap Spinners

Pro Component

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Border Spinner

Copy

import React from "react";

// reactstrap components
import { Button, Spinner } from "reactstrap";

function Example() {
  return (
    <>
      <Spinner>
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Button
        className=" ml-2 mb-2"
        color="primary"
        disabled
        size="sm"
        type="button"
      >
        <Spinner size="sm"></Spinner>
        <span className=" sr-only">Loading...</span>
      </Button>
      <Button
        className=" mb-2"
        color="primary"
        disabled
        size="sm"
        type="button"
      >
        <Spinner size="sm" role="status"></Spinner>
        Loading...
      </Button>
    </>
  );
}

export default Example;

Variations

Copy

import React from "react";

import { Spinner } from "reactstrap";

function Example() {
  return (
    <>
      <Spinner className="text-primary">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-success">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-danger">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-warning">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-info">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-light">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner className="text-default">
        <span className=" sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

export default Example;

Growing Spinner

Copy

import React from "react";

// reactstrap components
import { Button, Spinner } from "reactstrap";

function Example() {
  return (
    <>
      <Spinner type="grow">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Button
        className=" ml-2 mb-2"
        color="primary"
        disabled
        size="sm"
        type="button"
      >
        <Spinner type="grow" size="sm"></Spinner>
        <span className=" sr-only">Loading...</span>
      </Button>
      <Button
        className=" mb-2"
        color="primary"
        disabled
        size="sm"
        type="button"
      >
        <Spinner type="grow" size="sm" role="status"></Spinner>
        Loading...
      </Button>
    </>
  );
}

export default Example;

Variations

Copy

import React from "react";

import { Spinner } from "reactstrap";

function Example() {
  return (
    <>
      <Spinner type="grow" className="text-primary">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-success">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-danger">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-warning">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-info">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-light">
        <span className=" sr-only">Loading...</span>
      </Spinner>
      <Spinner type="grow" className="text-default">
        <span className=" sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.