buttonloadingintermediate

Loading Button

A button with an animated spinner that indicates a loading state.

Preview
<button class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg opacity-80 cursor-not-allowed" disabled>
  <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
  </svg>
  Processing...
</button>

Color Breakdown

Background

bg-blue-600

#2563eb

Text

text-white

#ffffff

Spinner

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-blue-500

Use Cases

Form submissionsPayment processingFile uploads

Browser Support

All modern browsers. CSS animations supported in all evergreen browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Outline Button

button - beginner

Split Button

button - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I toggle between normal and loading state?▼
Use JavaScript to add/remove the disabled attribute and swap the button text and spinner SVG.
Can I change the spinner color?▼
Change the text-white class on the SVG to any Tailwind text color class.