Bootstrap - Spinners

Welcome, aspiring web developers! Today, we're diving into the exciting world of Bootstrap spinners. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, step by step. So, grab your favorite beverage, get comfortable, and let's spin our way through this tutorial!

How it works

Spinners in Bootstrap are used to indicate a loading state in your web applications. They're like those little spinning circles you see when a website is loading content. These nifty components help improve user experience by providing visual feedback that something is happening behind the scenes.

Bootstrap spinners are built with HTML, CSS, and a dash of JavaScript magic. They use custom CSS to create the spinning animation, ensuring a smooth and consistent look across different browsers and devices.

Border spinner

Let's start with the most basic spinner: the border spinner. This is the default spinner style in Bootstrap.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

In this example, we have a div element with two classes: spinner-border and role="status". The spinner-border class applies the spinning animation, while role="status" helps screen readers understand that this is a status indicator.

Inside the div, we have a span with the class visually-hidden. This text is not visible on the screen but can be read by screen readers, improving accessibility for users with visual impairments.

Colors

Just like a chameleon changing colors, our spinners can adapt to different themes! Bootstrap allows you to customize the color of your spinners using text color utilities.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Each spinner in this example has an additional class like text-primary, text-secondary, etc. These classes change the color of the spinner to match Bootstrap's color scheme.

Growing spinner

If border spinners aren't your cup of tea, Bootstrap offers another flavor: the growing spinner. This spinner grows and shrinks instead of rotating.

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

The structure is similar to the border spinner, but we use the spinner-grow class instead of spinner-border.

Alignment

Aligning spinners is as easy as pie with Bootstrap's flexbox utilities. Let's look at some examples:

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

In the first example, we use justify-content-center to center the spinner horizontally. In the second, we align the spinner vertically with some text using align-items-center.

Margin

Need some space around your spinner? Bootstrap's margin utilities come to the rescue!

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

The m-5 class adds a margin of size 5 (which is typically 3rem) around all sides of the spinner.

Placement

Spinners can be placed within various other elements. Here's how you can put a spinner inside a button:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

In these examples, we place the spinner inside a button and use spinner-border-sm to make it smaller.

Flex

Flexbox utilities can help you create more complex layouts with spinners:

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

This centers the spinner horizontally within its container.

Float

For those times when you need your spinner to float, Bootstrap's float utilities are here to help:

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

The float-end class makes the spinner float to the right of its container.

Text align

Text alignment utilities can also be used with spinners:

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

This centers the spinner within its container using text alignment.

Size

Sometimes, size does matter! You can adjust the size of your spinners using Bootstrap's sizing classes:

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Use spinner-border-sm or spinner-grow-sm for smaller spinners. For custom sizes, you can use inline styles to set specific dimensions.

Buttons

Last but not least, let's look at how to use spinners within buttons:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

These examples show how to incorporate both border and growing spinners into buttons, with and without accompanying text.

And there you have it, folks! You're now a Bootstrap spinner expert. Remember, practice makes perfect, so don't be afraid to experiment with these components in your projects. Happy coding, and may your web pages always spin in style!

Method	Description
spinner-border	Creates a rotating border spinner
spinner-grow	Creates a growing and shrinking spinner
text-[color]	Changes the color of the spinner (e.g., text-primary, text-secondary)
spinner-border-sm	Creates a small border spinner
spinner-grow-sm	Creates a small growing spinner
m-[size]	Adds margin around the spinner (e.g., m-5)
d-flex	Creates a flexbox container
justify-content-center	Centers content horizontally in a flexbox container
align-items-center	Centers content vertically in a flexbox container
float-[direction]	Floats the spinner (e.g., float-end)
text-center	Centers the spinner using text alignment
visually-hidden	Hides content visually but keeps it accessible to screen readers

Credits: Image by storyset