Spinner
Shows a loading spinner to indicate that the app is busy or the page is still loading.
Default
The standard spinner within an item container.
Custom Icon
Replacing the default spinner icon.
Size
Spinners in various sizes using text classes.
Colors
Customizing colors using Tailwind CSS utility classes.
Button
Spinners integrated into different button variants.
Badge
Spinners within badges to indicate background processing.
Input Group
Spinners as addons in input groups for validation or search states.
Empty State
Using spinners in empty state placeholders during initial data fetch.
Item
Spinners in list items to show individual record loading.
129 MB / 1000 MB
Educational Examples
Meaningful contexts for using spinners in your application.
Data Processing
When your application is performing heavy background tasks, like analyzing large datasets or generating reports, use a spinner to keep the user informed.
Secure Connection
Establishing a secure, encrypted tunnel to your private cloud infrastructure. This usually takes a few seconds.
Media Upload
Your high-resolution video is being transcoded for web delivery. You can safely close this window; we'll notify you when it's done.
AI Assistant
Spartlytic AI is scanning your logs to identify performance bottlenecks and security vulnerabilities.
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Helm API
The Helm component provides the spartan/ui styling for the spinner.
| Directive | Selector | Inputs |
|---|---|---|
| HlmSpinner | hlm-spinner |
|
Brain API
Spinner is currently a styling-only component and does not have a Brain implementation.