Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
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.
- 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.
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.
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.
Like border spinners, growing spinners support contextual colors to match your application's visual hierarchy and meaning.
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.
Placement Options
Different placement options help integrate spinners seamlessly into your layout, whether centered, aligned with text, or positioned using float utilities.
Flex Alignment
Float Alignment
Text Alignment
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.
For custom sizes, use inline styles or CSS to set specific dimensions:
Button Integration
Integrate spinners into buttons to indicate loading states during form submissions or action processing. Use appropriate text to describe the ongoing action.