Spinner components in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a spinner component in Bootstrap?

A spinner component in Bootstrap is a small animated graphic that shows loading or processing activity to users, helping them know the app is working.

beginner

How do you create a simple spinner using Bootstrap?

Use the <div class='spinner-border' role='status'><span class='visually-hidden'>Loading...</span></div> code. This creates a circular spinner with accessible text.

intermediate

What role does role='status' play in spinner components?

It helps screen readers announce the spinner as a status message, improving accessibility for users who rely on assistive technology.

beginner

Name two types of spinners Bootstrap offers.

Bootstrap offers border spinners (a rotating border) and grow spinners (a growing and shrinking circle).

intermediate

How can you change the color of a Bootstrap spinner?

Add a color utility class like <code>text-primary</code>, <code>text-success</code>, or <code>text-danger</code> to the spinner element to change its color.

Which Bootstrap class creates a border spinner?

A spinner-border

B spinner-grow

C spinner-circle

D spinner-rotate

The class spinner-border creates a spinner with a rotating border.

What is the purpose of the <span class='visually-hidden'> inside a spinner?

A To add color to the spinner

B To show a tooltip on hover

C To provide accessible text for screen readers

D To animate the spinner

The visually-hidden class hides text visually but keeps it readable by screen readers.

Which attribute improves accessibility by indicating the spinner is a status message?

A tabindex='0'

B role='button'

C aria-hidden='true'

D role='status'

The role='status' tells assistive tech that the spinner is a live status update.

How do you make a spinner larger in Bootstrap?

A Add class <code>spinner-border</code> with custom CSS size

B Add inline style <code>font-size</code>

C Add class <code>spinner-lg</code>

D Add class <code>spinner-border-sm</code>

Bootstrap does not provide a built-in large spinner class, so you customize size with CSS on the spinner element.

Which spinner type grows and shrinks instead of rotating?

A spinner-border

B spinner-grow

C spinner-pulse

D spinner-fade

The spinner-grow class creates a spinner that grows and shrinks.

Explain how to create an accessible spinner component in Bootstrap.

Think about both the visual spinner and how screen readers understand it.

Describe how you can customize the appearance of Bootstrap spinners.

Consider color, size, and spinner style.