Animated Loading 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

<!-- Loading Button Animation Styles -->
<style>
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .animate-spin-fast {
    animation: spin 1s linear infinite;
  }
</style>

<!-- Loading Button - Blue -->
<button class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg flex items-center gap-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all" disabled>
  <svg class="w-5 h-5 animate-spin-fast" 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 - Green -->
<button class="px-6 py-2.5 bg-green-600 text-white font-medium rounded-lg flex items-center gap-2 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all" disabled>
  <svg class="w-5 h-5 animate-spin-fast" 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>
  Saving...
</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
37
38
39
40
41
42
43

# Animated Button Loading

Button with a loading / progress animation state.

## Preview

Open `preview.html` for a standalone demonstration of this variant.

## Features

- Loading indicator treatment
- CSS animation
- Focus-visible states
- Native button

## Usage

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

Copy from `code.html`. Wire the loading class/state from your app logic as needed.

## Customization

- Spinner / progress classes
- Colors and sizing

## Accessibility

- Prefer `aria-busy` when the button is in a loading state
- Native `<button>`

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file