Loading Button Spinner

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 Spinner Animation -->
<style>
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .animate-spin {
    animation: spin 1s linear infinite;
  }
</style>

<!-- Loading Button - Primary -->
<button class="px-6 py-2.5 bg-blue-600 text-white font-medium 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>

<!-- Loading Button - Success -->
<button class="px-6 py-2.5 bg-green-600 text-white font-medium 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>
  Processing
</button>

<!-- Loading Button - Outline -->
<button class="px-6 py-2.5 border border-gray-300 text-gray-700 font-medium rounded-lg flex items-center gap-2 cursor-wait bg-gray-50" disabled>
  <svg class="w-5 h-5 animate-spin text-gray-500" 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>
  Refreshing
</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 Spinner

Button with spinner loading indicator.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Spinner loading state
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/loading-button/spinner
```

Copy from `code.html`.

## Customization

- Spinner size/color, button surface

## Accessibility

- Prefer `aria-busy="true"` while loading

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`