Loading Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- Loading Button with Progress Bar -->
<!-- Blue Progress -->
<button class="relative w-full overflow-hidden rounded-lg bg-blue-600 px-6 py-3 text-base font-medium text-white cursor-wait" disabled>
  <span class="mr-2">Uploading...</span>
  <div class="absolute bottom-0 left-0 h-1 bg-blue-300 w-1/3 animate-pulse"></div>
</button>

<!-- Green Progress -->
<button class="relative w-full overflow-hidden rounded-lg bg-green-600 px-6 py-3 text-base font-medium text-white cursor-wait" disabled>
  <span class="mr-2">Processing...</span>
  <div class="absolute bottom-0 left-0 h-1 bg-green-300 w-2/3 animate-pulse"></div>
</button>

<!-- Purple Progress -->
<button class="relative w-full overflow-hidden rounded-lg bg-purple-600 px-6 py-3 text-base font-medium text-white cursor-wait" disabled>
  <span class="mr-2">Installing...</span>
  <div class="absolute bottom-0 left-0 h-1 bg-purple-300 w-1/2 animate-pulse"></div>
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Loading Button

Buttons with loading states, spinners, and progress indicators.

## Variants

| Variant | Description |
|---------|-------------|
| [Spinner](./spinner/) | Loading buttons with spinner animations |
| [Progress](./progress/) | Loading buttons with progress bar |

## Quick Start

```html
<style>
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .animate-spin {
    animation: spin 1s linear infinite;
  }
</style>

<button class="px-6 py-2.5 bg-blue-600 text-white rounded-lg flex items-center gap-2 cursor-wait" disabled>
  <svg class="w-5 h-5 animate-spin" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading
</button>
```

## Related

- [Animated Button](../animated-button/) - General animations
- [Basic Button](../basic-button/) - Core button styles