x
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SPINNER:</strong> Rotating busy indicator<br> <strong>VARIANTS:</strong> Default | Small | Large | Button loading </p> <p class="tw:mb-0 tw:text-sm"> Inherits <code>currentColor</code>, so it matches any text or button ink. Always pair with visible text or an <code>aria-label</code> — the spinner itself is <code>aria-hidden</code>. Under reduced motion it slows rather than stops (busy state is meaning). </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Sizes</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> <code>.spinner-border-sm</code> for inline/button use, default for standalone, <code>.spinner-border-lg</code> for page-level loading. </p> </div> <div class="tw:flex tw:items-center tw:gap-6 tw:text-primary" role="status" aria-label="Loading"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> <span class="spinner-border" aria-hidden="true"></span> <span class="spinner-border spinner-border-lg" aria-hidden="true"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="spinner-border" aria-hidden="true"></span></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Button loading state</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Contract:</strong> add <code>.btn-loading</code> + <code>disabled</code> + <code>aria-busy="true"</code>, swap the label text. Blocks double-submit (rubric C05). </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Saving… </button> <button class="btn btn-secondary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Loading… </button> <button class="btn btn-outline-primary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Submitting… </button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="btn btn-primary btn-loading" disabled aria-busy="true"><span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Saving…</button></code> </div> </div></div>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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Introductory callout %> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SPINNER:</strong> Rotating busy indicator<br> <strong>VARIANTS:</strong> Default | Small | Large | Button loading </p> <p class="tw:mb-0 tw:text-sm"> Inherits <code>currentColor</code>, so it matches any text or button ink. Always pair with visible text or an <code>aria-label</code> — the spinner itself is <code>aria-hidden</code>. Under reduced motion it slows rather than stops (busy state is meaning). </p> </div> <%# Sizes %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Sizes</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> <code>.spinner-border-sm</code> for inline/button use, default for standalone, <code>.spinner-border-lg</code> for page-level loading. </p> </div> <div class="tw:flex tw:items-center tw:gap-6 tw:text-primary" role="status" aria-label="Loading"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> <span class="spinner-border" aria-hidden="true"></span> <span class="spinner-border spinner-border-lg" aria-hidden="true"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="spinner-border" aria-hidden="true"></span></code> </div> </div> <%# Button loading %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Button loading state</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Contract:</strong> add <code>.btn-loading</code> + <code>disabled</code> + <code>aria-busy="true"</code>, swap the label text. Blocks double-submit (rubric C05). </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <button class="btn btn-primary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Saving… </button> <button class="btn btn-secondary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Loading… </button> <button class="btn btn-outline-primary btn-loading" type="button" disabled aria-busy="true"> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Submitting… </button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="btn btn-primary btn-loading" disabled aria-busy="true"><span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Saving…</button></code> </div> </div></div>No notes provided.
No params configured.