Bootstrap4 Spinners

## Introduction to Bootstrap 4 Spinners Bootstrap 4 introduces a dedicated spinner component to indicate the loading state of projects, pages, or specific components. These spinners are built entirely with HTML and CSS, meaning you do not need any custom JavaScript to animate them. They are highly customizable, responsive, and easy to integrate into buttons, cards, or page overlays. --- ## 1. Border Spinners (Default) The most common loading indicator is the border spinner. To create a lightweight, rotating border spinner, use the `.spinner-border` class on an element (typically a `

` or ``). ### Basic Example ```html

``` ### Colored Spinners By default, the border spinner uses `currentColor` for its border color. You can easily customize its color using Bootstrap's standard text color utility classes (e.g., `.text-primary`, `.text-success`, etc.). ```html

``` --- ## 2. Growing Spinners (Flashing Effect) If you prefer a pulsing or flashing animation instead of a spinning circle, you can use the growing spinner. Apply the `.spinner-grow` class to create an element that repeatedly grows and fades out. ### Growing Spinners with Colors Just like the border spinner, you can change the color of the growing spinner using text color utilities. ```html

``` --- ## 3. Spinner Sizes Bootstrap 4 provides utility classes to quickly scale spinners down for smaller components, such as inline text or buttons. * Use `.spinner-border-sm` or `.spinner-grow-sm` to create a smaller spinner. * Alternatively, you can use custom CSS or inline styles to set specific `width` and `height` dimensions. ### Small Border Spinner ```html

``` ### Small Growing Spinner ```html

``` ### Custom Size Example ```html

``` --- ## 4. Loading Buttons Spinners can be placed inside buttons to indicate that an action is currently processing (e.g., submitting a form or fetching data). ### Examples ```html ``` --- ## Accessibility Considerations To ensure your application remains accessible to users with screen readers, keep the following best practices in mind: 1. **Use `role="status"`**: Always add `role="status"` to your spinner container to inform assistive technologies that the element represents a loading state. 2. **Include `.sr-only` text**: Inside the spinner, add a nested `` with the class `.sr-only` containing descriptive text (e.g., `Loading...`). This text will be hidden visually but read aloud by screen readers. 3. **Use `aria-hidden="true"` inside buttons**: When a spinner is placed inside a button next to visible text (like "Loading..."), add `aria-hidden="true"` to the spinner element so screen readers do not read the redundant "Loading..." state twice.

YouTip

Bootstrap4 Spinners

📂 Categories