htmx/static/pico-1.5.11/scss/utilities/_loading.scss


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

/**
 * Loading ([aria-busy=true])
 */


// Cursor
[aria-busy="true"] {
  cursor: progress;
}

// Everyting except form elements
[aria-busy="true"]:not(input, select, textarea, html) {

  &::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.1875em solid currentColor;
    border-radius: 1em;
    border-right-color: transparent;
    content: "";
    vertical-align: text-bottom;
    vertical-align: -.125em; // Visual alignment
    animation: spinner 0.75s linear infinite;
    opacity: var(--loading-spinner-opacity);
  }

  &:not(:empty) {
    &::before {
      margin-right: calc(var(--spacing) * 0.5);
      margin-left: 0;
      margin-inline-start: 0;
      margin-inline-end: calc(var(--spacing) * 0.5);
    }
  }

  &:empty {
    text-align: center;
  }
}

// Buttons and links
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a {
  &[aria-busy="true"] {
    pointer-events: none;
  }
}

// Animation: rotate
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}