React Bootstrap Spinner Component

Spinner with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use the React Bootstrap Spinner component from CoreUI to show loading states in your app with animated indicators, color options, alignment, and sizing.

On this page

React Bootstrap Spinner Component#

The React Bootstrap Spinner component displays a visual loading indicator in your app. Use it to communicate that content is loading, such as form submissions, page data, or background processes.

All spinners are built with HTML and CSS—no JavaScript needed. You can easily customize appearance, color, size, and placement using utility classes.

Border spinner#

Use the border spinner as a lightweight, animated loading indicator.

Spinner colors#

The React Bootstrap Spinner uses currentColor, so you can customize it using any text color utility class.

Grow spinner#

An alternative to the border version is the grow spinner. It expands and fades instead of spinning.

Spinner alignment#

React Bootstrap Spinners use inline-flex, so they align well in many layout contexts.

Margin utilities#

Use Bootstrap spacing utilities for control over margin and spacing.

Flex alignment#

Loading...

Float placement#

Text alignment#

Spinner size#

Use the size="sm" prop for a compact spinner.

For full control, use inline styles or custom CSS:

Spinners in buttons#

Show React Bootstrap Spinners inside buttons to indicate loading states during form submissions or API requests.

Accessibility#

Each spinner includes role="status" and a visually hidden <span> with "Loading..." for screen readers. You can customize the text based on context.

API reference#

Explore the full API for the React Bootstrap Spinner component:

<CSpinner />