* utilities: add css vars for load indicator.

easysoft · May 17, 2024 · 9a9d2b1 · 9a9d2b1
1 parent a531af8
commit 9a9d2b1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/lib/utilities/src/interactivity/loading.css b/lib/utilities/src/interactivity/loading.css
@@ -1,6 +1,6 @@
 .load-indicator::before,
 .load-indicator::after {
-    @apply -opacity-0 -invisible -absolute -block -transition-all -duration-300 -delay-0;
+    @apply -opacity-0 -invisible -absolute -block -transition-all -duration-[--load-indicator-duration] -delay-0;
 }
 .load-indicator::before {
     @apply -content-[attr(data-loading)] -flex -items-center -justify-center -text-sm -inset-0 -bg-canvas/70 -z-[99] -rounded-[inherit];
@@ -13,7 +13,7 @@
 }
 .load-indicator.loading::before,
 .load-indicator.loading::after {
-    @apply -opacity-100 -visible -delay-500;
+    @apply -opacity-100 -visible -delay-[--load-indicator-delay];
 }
 .load-indicator.loading::after {
     @apply -opacity-50 -animate-spin;

diff --git a/lib/utilities/src/vars.css b/lib/utilities/src/vars.css
@@ -3,4 +3,7 @@
   --state-scale: .9;
   --opacity-disabled: .7;
   --opacity-muted: .5;
+
+  --load-indicator-duration: 300ms;
+  --load-indicator-delay: .5s;
 }