Spinners

Loading indicators and spinners for displaying ongoing processes and async operations.

Basic Spinner

Default circular spinner with rotating border animation.

HTML

<div class="focus-spinner"></div>

Sizes

Multiple spinner sizes using .focus-spinner-sm, .focus-spinner-lg, and .focus-spinner-xl.

Small

Default

Large

Extra Large

HTML

<div class="focus-spinner focus-spinner-sm"></div>
<div class="focus-spinner"></div>
<div class="focus-spinner focus-spinner-lg"></div>
<div class="focus-spinner focus-spinner-xl"></div>

Colors

Contextual color variants for different states.

Primary

Secondary

Success

Danger

White

HTML

<div class="focus-spinner focus-spinner-primary"></div>
<div class="focus-spinner focus-spinner-secondary"></div>
<div class="focus-spinner focus-spinner-success"></div>
<div class="focus-spinner focus-spinner-danger"></div>
<div class="focus-spinner focus-spinner-white"></div>

Dots Spinner

Alternative spinner style using animated dots with .focus-spinner-dots.

HTML

<div class="focus-spinner-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

Centered Spinner Container

Center a spinner using .focus-spinner-container wrapper.

HTML

<div class="focus-spinner-container">
  <div class="focus-spinner"></div>
</div>

Spinner with Text

Combine spinner with loading text for better user feedback.

Loading data...

HTML

<div class="focus-spinner-container" style="flex-direction: column;">
  <div class="focus-spinner focus-spinner-lg"></div>
  <p style="margin-top: 1rem;">Loading data...</p>
</div>

Overlay Spinner

Full-screen overlay spinner using .focus-spinner-overlay.

HTML

<div class="focus-spinner-overlay">
  <div class="focus-spinner focus-spinner-white focus-spinner-xl"></div>
</div>

JavaScript

// Show overlay
document.querySelector('.focus-spinner-overlay').style.display = 'flex';

// Hide overlay
document.querySelector('.focus-spinner-overlay').style.display = 'none';

Spinner in Buttons

Display loading state in buttons.

HTML

<button class="focus-btn focus-btn-primary" disabled>
  <div class="focus-spinner focus-spinner-sm focus-spinner-white"></div>
  Loading...
</button>

CSS Classes Reference

Class	Description
`.focus-spinner`	Basic circular spinner
`.focus-spinner-sm`	Small size variant
`.focus-spinner-lg`	Large size variant
`.focus-spinner-xl`	Extra large size variant
`.focus-spinner-primary`	Primary color
`.focus-spinner-secondary`	Secondary color
`.focus-spinner-success`	Success color
`.focus-spinner-danger`	Danger color
`.focus-spinner-white`	White color (for dark backgrounds)
`.focus-spinner-dots`	Dots spinner variant
`.focus-spinner-container`	Centered spinner container
`.focus-spinner-overlay`	Full-screen overlay spinner