Tailwind CSS Spinner
David UI’s spinner component keeps users informed during loading processes such as loading data, performing an operation, or waiting for a response from the server. Lightweight and styled with Tailwind CSS, it integrates easily into buttons, modals, or full pages.
See below our Tailwind CSS examples of spinner components. Copy-paste them directly to your project.
Basic Spinner
This basic spinner design uses two concentric circles to create a smooth spinning effect. Its minimalistic style ensures that it complements the application content without drawing unnecessary attention.
Spinner Sizes
This example showcases spinner icons in varying sizes, progressing from smaller to larger. Select the size that best aligns with your project's design and functionality needs.
Spinner Colors
Discover how to customize the color scheme of your spinner component. The animation uses the text-surface class for the spinning effect, while individual SVG paths feature distinct colors such as primary, secondary, info, success, warning, and error. Tailor the color palette to suit your project’s aesthetic.
Spinner Custom Styles
Explore how to apply unique customizations to your spinner with Tailwind CSS classes. The animation effect (animate-spin) adds dynamic motion, signaling an ongoing process. The subtle gray hue from the text-surface class enhances visibility without overpowering the content, while w-16 h-16 sets the spinner to a larger size, making it suitable for attention-grabbing scenarios.
