Add a busy state for form buttons

2025-10-29 19:34:33 -05:00
parent cba945104a
commit 8d0041f6b9
1 changed files with 25 additions and 0 deletions
@@ -39,6 +39,31 @@
      opacity: 0.3;
      pointer-events: none;
    }
+
+    [aria-busy] &:disabled {
+      position: relative;
+
+      > * {
+        visibility: hidden;
+      }
+
+      &::after {
+        --mask: no-repeat radial-gradient(#000 68%,#0000 71%);
+        --size: 1.25em;
+
+        -webkit-mask: var(--mask), var(--mask), var(--mask);
+        -webkit-mask-size: 28% 45%;
+        animation: submitting 1s infinite linear;
+        aspect-ratio: 8/5;
+        background: currentColor;
+        content: "";
+        inline-size: var(--size);
+        inset: 50%;
+        margin-block: calc((var(--size) / 3) * -1);
+        margin-inline: calc((var(--size) / 2) * -1);
+        position: absolute;
+      }
+    }
  }

  /* Variants