##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Spinners

Spinners are essential loading indicators that provide visual feedback during content loading, data processing, or any asynchronous operation. They help improve user experience by indicating that the application is actively working on their request.

Best Practices:

- Use appropriate spinner sizes based on the context (small for buttons, larger for content areas)
- Include meaningful loading messages for better accessibility
- Choose colors that match your application's context (e.g., primary for main actions)
- Consider using growing spinners for more dynamic visual feedback

### Border Spinner

The border spinner is the default loading indicator, created using the `spinner-border` class. It provides a simple rotating border animation that's widely recognized as a loading state.

Border Spinner
Loading...
Border Spinner
Loading...

### Contextual Colors

Customize spinner colors using Bootstrap's text color utilities (`text-*`) to match your application's context and provide meaningful visual cues about the type of content being loaded.

Colored Spinners
Loading...
Colored Spinners
Loading...

### Growing Spinner

The growing spinner (`spinner-grow`) provides an alternative animation style with a pulsing effect, useful for indicating more dynamic loading states or when you want to differentiate from the border spinner.

Growing Spinner
Loading...
Growing Spinner
Loading...

Like border spinners, growing spinners support contextual colors to match your application's visual hierarchy and meaning.

Colored Growing Spinners
Loading...
Colored Growing Spinners
Loading...

### Spinner Alignment

Position spinners using Bootstrap's flexbox utilities, margin utilities, or text alignment classes to achieve the desired layout and spacing in your interface.

### Margin Spacing

Add margin to spinners using Bootstrap's spacing utilities (`m-*`) to create appropriate spacing between elements.

Margin Spacing
Loading...
Margin Spacing
Loading...

### Placement Options

Different placement options help integrate spinners seamlessly into your layout, whether centered, aligned with text, or positioned using float utilities.

### Flex Alignment

Centered Spinner
Loading...
Centered Spinner
Loading...
Spinner with Text
Loading...
Spinner with Text
Loading...

### Float Alignment

Float-aligned Spinner
Loading...
Float-aligned Spinner
Loading...

### Text Alignment

Text-aligned Spinner
Loading...
Text-aligned Spinner
Loading...

### Size Variations

Use size variations to match your spinner with the surrounding content. Small spinners work well in buttons or inline elements, while larger ones are suitable for content areas.

Small Spinners
Loading...
Small Spinners
Loading...

For custom sizes, use inline styles or CSS to set specific dimensions:

Custom-sized Spinners
Loading...
Custom-sized Spinners
Loading...

### Button Integration

Integrate spinners into buttons to indicate loading states during form submissions or action processing. Use appropriate text to describe the ongoing action.

Buttons with Border Spinners
Loading...
Buttons with Border Spinners
Loading...
Buttons with Growing Spinners
Loading...
Buttons with Growing Spinners
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates