Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Border spinner

Bootstrap offers two animation styles for spinners. The animation style can be configured with the animation property. An animation style must always be provided when creating a spinner.Use animation="border" for a lightweight loading indicator.

Preview

Jsx

import React from 'react';
import { Spinner } from 'react-bootstrap';

const BorderedSpinner = () => {

  return (
    <Spinner animation="border" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
};

export default BorderedSpinner;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

Preview

Jsx

import React from 'react';
import { Spinner } from 'react-bootstrap';

const GrowingSpinnerExample = () => {

  return (
    <Spinner animation="grow" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
};

export default GrowingSpinnerExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Variants

All standard visual variants are available for both animation styles by setting the variant property. Alternatively spinners can be custom sized with the style property, or custom CSS classes.

Preview

Jsx

Props

import React from 'react';
import { Col, Row, Spinner } from 'react-bootstrap';

const SpinnerVariants = () => {

  return (
    <>
        <Row className="mb-5">
            <Col>
                <Spinner animation="border" variant="primary" />
                <Spinner animation="border" variant="secondary" />
                <Spinner animation="border" variant="success" />
                <Spinner animation="border" variant="danger" />
                <Spinner animation="border" variant="warning" />
                <Spinner animation="border" variant="info" />
                <Spinner animation="border" variant="light" />
                <Spinner animation="border" variant="dark" />
            </Col>
        </Row>
        <Row>
            <Col>
                <Spinner animation="grow" variant="primary" />
                <Spinner animation="grow" variant="secondary" />
                <Spinner animation="grow" variant="success" />
                <Spinner animation="grow" variant="danger" />
                <Spinner animation="grow" variant="warning" />
                <Spinner animation="grow" variant="info" />
                <Spinner animation="grow" variant="light" />
                <Spinner animation="grow" variant="dark" />
            </Col>
        </Row>
    </>
  );
};

export default SpinnerVariants;

Props	Type	Default	Description
`variant`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark		The visual color style of the spinner

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizes

In addition to the standard size, a smaller additional preconfigured size is available by configuring the size property to sm.

Preview

Jsx

import React from 'react';
import { Spinner } from 'react-bootstrap';

const SpinnerSizes = () => {

  return (
    <>
        <Spinner animation="border" size="sm" />
        <Spinner animation="border" />
        <Spinner animation="grow" size="sm" />
        <Spinner animation="grow" />
    </>
  );
};

export default SpinnerSizes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Buttons

Like the original Bootstrap spinners, these can also be used with buttons. To use this component out-of-the-box it is recommended you change the element type to span by configuring the as property when using spinners inside buttons.

Preview

Jsx

import React from 'react';
import { Button, Spinner } from 'react-bootstrap';

const SpinnerWithButton = () => {

  return (
    <>
       <Button variant="primary" disabled>
            <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />
            <span className="visually-hidden">Loading...</span>
        </Button>
        <Button variant="primary" disabled>
            <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />
            Loading...
        </Button>
        <Button variant="primary" disabled>
            <Spinner as="span" animation="grow" size="sm" role="status" aria-hidden="true" />
            <span className="visually-hidden">Loading...</span>
        </Button>
        <Button variant="primary" disabled>
            <Spinner as="span" animation="grow" size="sm" role="status" aria-hidden="true" />
            Loading...
        </Button>
    </>
  );
};

export default SpinnerWithButton;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Spinners

Border spinner

Growing spinner

Variants

Sizes

Buttons