Spinner components in Bootsrap - Browser Rendering Trace

Render Flow - Spinner components

Load HTML with spinner markup

↓

Bootstrap CSS applies spinner styles

↓

Browser creates spinner animation

↓

Spinner element displayed with rotating effect

The browser reads the spinner HTML, applies Bootstrap's CSS for spinner styles and animations, then renders the rotating spinner visually.

Render Steps - 4 Steps

Code Added:<div class="spinner-border" role="status">...</div>

Before

[Empty page]

→

After

[  ○  ]
(Empty circle with no animation)

Adding the spinner element creates a circular shape with border styling but no animation yet.

🔧 Browser Action:Creates DOM node and applies static CSS styles

Code Sample

A circular spinner with a rotating border indicating loading, sized 2rem by 2rem, with accessible hidden text.

Bootsrap

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

Bootsrap

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
  100% { transform: rotate(360deg); }
}

Render Quiz - 3 Questions

After applying step 3, what visual change do you see?

A The spinner rotates continuously

B The spinner changes color

C The spinner disappears

D The spinner grows in size

Common Confusions - 3 Topics

Why does the spinner not spin if I forget the animation property?

Without the animation property, the spinner border stays static and does not rotate, so it looks like a static circle.

💡 Remember: animation property triggers the spinning effect (see step 3).

Why is the spinner a full circle with no gap sometimes?

If border-right-color is not set to transparent, the spinner looks like a full circle with no visible rotation gap.

💡 Set border-right-color to transparent to create the rotating gap (see step 2).

Why can't screen readers tell what the spinner means?

If the visually hidden text is missing, screen readers have no descriptive text for the spinner.

💡 Always add a visually hidden label inside the spinner for accessibility (see step 4).

Property Reference

Property	Value Applied	Visual Effect	Common Use
display	inline-block	Allows spinner to flow inline with text	Inline loading indicators
width & height	2rem	Sets spinner size	Adjust spinner size
border	0.25em solid currentColor	Creates circular border shape	Defines spinner shape and thickness
border-right-color	transparent	Creates gap for rotation effect	Visual cue for spinner animation
border-radius	50%	Makes shape circular	Round spinner shape
animation	spinner-border .75s linear infinite	Rotates spinner continuously	Loading animation

Concept Snapshot

Bootstrap spinner components use a circular border with one side transparent to create a rotating gap. Key properties: display:inline-block, width/height:2rem, border-radius:50%, border-right-color:transparent, animation for rotation. Add visually hidden text inside for screen reader accessibility. The animation property triggers the spinning effect. Without animation, spinner is static; without transparent border side, no visible gap.