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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SPINNER:</strong> Loading indicator (border spinner)<br> <strong>VARIANTS:</strong> Base | Sm | Lg | any tw:text-* colour </p> <p class="tw:mb-0 tw:text-sm"> Indicates an indeterminate loading state. Colour inherits from <code>currentColor</code> — pair with a semantic text utility. Always carries <code>role="status"</code> and an accessible name. For buttons, keep using <code>.tw-btn-loading</code>; this component is for pages, cards, and panels. Ported per DR-2026-12. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Colours</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"><strong>Colour:</strong> set with a text utility; the border uses currentColor.</p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-success" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-danger" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-muted" role="status" aria-label="Loading"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Sizes</h2> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <div class="tw-spinner-border tw-spinner-border-sm tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw-spinner-border-lg tw:text-primary" role="status" aria-label="Loading"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border tw-spinner-border-sm ..."></code> · <code><div class="tw-spinner-border tw-spinner-border-lg ..."></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With visible label (loading panel)</h2> <div class="tw-card"> <div class="tw-card-body tw:text-center tw:py-12"> <div class="tw-spinner-border tw:text-primary tw:mb-3" role="status" aria-hidden="true"></div> <p class="tw:text-muted tw:mb-0">Loading applications…</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border ..." aria-hidden="true"></div><p>Loading applications…</p></code> — when a visible label exists, hide the ring from assistive tech instead of double-announcing. </div> </div> <!-- Dots and bars (2026-08-11, DR-2026-13) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Dots and bars</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shapes for other jobs:</strong> a ring is wrong for a typing indicator or an inline activity meter. Both inherit <code>currentColor</code> like the border spinner and calm their animation under reduced motion. Markup is three unclassed <code><span></code> children. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-8"> <span class="tw-spinner-dots tw:text-muted" role="status" aria-label="Emma is typing"><span></span><span></span><span></span></span> <span class="tw-spinner-dots tw-spinner-dots-lg tw:text-primary" role="status" aria-label="Loading"><span></span><span></span><span></span></span> <span class="tw-spinner-bars tw:text-primary" role="status" aria-label="Processing"><span></span><span></span><span></span></span> <span class="tw-spinner-bars tw-spinner-bars-sm tw:text-muted" role="status" aria-label="Working"><span></span><span></span><span></span></span> <span class="tw:inline-flex tw:items-center tw:gap-2 tw:text-sm tw:text-muted"> <span class="tw-spinner-dots" aria-hidden="true"><span></span><span></span><span></span></span> Emma is typing… </span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="tw-spinner-dots" role="status" aria-label="Emma is typing"><span></span><span></span><span></span></span></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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SPINNER:</strong> Loading indicator (border spinner)<br> <strong>VARIANTS:</strong> Base | Sm | Lg | any tw:text-* colour </p> <p class="tw:mb-0 tw:text-sm"> Indicates an indeterminate loading state. Colour inherits from <code>currentColor</code> — pair with a semantic text utility. Always carries <code>role="status"</code> and an accessible name. For buttons, keep using <code>.tw-btn-loading</code>; this component is for pages, cards, and panels. Ported per DR-2026-12. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Colours</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"><strong>Colour:</strong> set with a text utility; the border uses currentColor.</p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-success" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-danger" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-muted" role="status" aria-label="Loading"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Sizes</h2> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4"> <div class="tw-spinner-border tw-spinner-border-sm tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw:text-primary" role="status" aria-label="Loading"></div> <div class="tw-spinner-border tw-spinner-border-lg tw:text-primary" role="status" aria-label="Loading"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border tw-spinner-border-sm ..."></code> · <code><div class="tw-spinner-border tw-spinner-border-lg ..."></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With visible label (loading panel)</h2> <div class="tw-card"> <div class="tw-card-body tw:text-center tw:py-12"> <div class="tw-spinner-border tw:text-primary tw:mb-3" role="status" aria-hidden="true"></div> <p class="tw:text-muted tw:mb-0">Loading applications…</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-spinner-border ..." aria-hidden="true"></div><p>Loading applications…</p></code> — when a visible label exists, hide the ring from assistive tech instead of double-announcing. </div> </div> <!-- Dots and bars (2026-08-11, DR-2026-13) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Dots and bars</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shapes for other jobs:</strong> a ring is wrong for a typing indicator or an inline activity meter. Both inherit <code>currentColor</code> like the border spinner and calm their animation under reduced motion. Markup is three unclassed <code><span></code> children. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-8"> <span class="tw-spinner-dots tw:text-muted" role="status" aria-label="Emma is typing"><span></span><span></span><span></span></span> <span class="tw-spinner-dots tw-spinner-dots-lg tw:text-primary" role="status" aria-label="Loading"><span></span><span></span><span></span></span> <span class="tw-spinner-bars tw:text-primary" role="status" aria-label="Processing"><span></span><span></span><span></span></span> <span class="tw-spinner-bars tw-spinner-bars-sm tw:text-muted" role="status" aria-label="Working"><span></span><span></span><span></span></span> <span class="tw:inline-flex tw:items-center tw:gap-2 tw:text-sm tw:text-muted"> <span class="tw-spinner-dots" aria-hidden="true"><span></span><span></span><span></span></span> Emma is typing… </span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="tw-spinner-dots" role="status" aria-label="Emma is typing"><span></span><span></span><span></span></span></code> </div> </div></div>No notes provided.
No params configured.