1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | [aria-busy="true"] {
|
8 | cursor: progress;
|
9 | }
|
10 |
|
11 |
|
12 | [aria-busy="true"]:not(input):not(select):not(textarea) {
|
13 |
|
14 | &::before {
|
15 | display: inline-block;
|
16 | width: 1em;
|
17 | height: 1em;
|
18 | border: 0.1875em solid currentColor;
|
19 | border-radius: 1em;
|
20 | border-right-color: transparent;
|
21 | vertical-align: text-bottom;
|
22 | vertical-align: -.125em;
|
23 | animation: spinner 0.75s linear infinite;
|
24 | content: '';
|
25 | opacity: var(--loading-spinner-opacity);
|
26 | }
|
27 |
|
28 | &:not(:empty) {
|
29 | &::before {
|
30 | margin-right: calc(var(--spacing) / 2);
|
31 | }
|
32 | }
|
33 |
|
34 | &:empty {
|
35 | text-align: center;
|
36 | }
|
37 | }
|
38 |
|
39 |
|
40 | button,
|
41 | input[type="submit"],
|
42 | input[type="button"],
|
43 | input[type="reset"],
|
44 | a {
|
45 | &[aria-busy="true"] {
|
46 | pointer-events: none;
|
47 | }
|
48 | }
|
49 |
|
50 |
|
51 | @keyframes spinner {
|
52 | to {
|
53 | transform: rotate(360deg);
|
54 | }
|
55 | }
|