feat: adds loading spinner to submit button

formkit · Nov 10, 2023 · 188db8e · 188db8e
1 parent 496461f
commit 188db8e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/inputs/form.ts b/src/inputs/form.ts
@@ -1,5 +1,6 @@
 export default {
   // inherits family:text classes
+  form: `group/form`,
   input: `
     focus:[&::-webkit-datetime-edit-month-field]:bg-$accentColor-100
     focus:[&::-webkit-datetime-edit-year-field]:bg-$accentColor-100

diff --git a/src/inputs/submit.ts b/src/inputs/submit.ts
@@ -19,6 +19,20 @@ export default {
     dark:disabled:bg-$colorTemperature-500
     dark:disabled:text-$colorTemperature-200
     dark:ring-offset-$accentColor-$baseColorShade(-1,*)
+
+    ${"" /* Styles for loading state — before element */}
+    group-data-[loading=true]/form:before:content['']
+    group-data-[loading=true]/form:before:block
+    group-data-[loading=true]/form:before:animate-spin
+    group-data-[loading=true]/form:before:w-5
+    group-data-[loading=true]/form:before:h-5
+    group-data-[loading=true]/form:before:rounded-full
+    group-data-[loading=true]/form:before:mr-$spacing(2,*)
+    group-data-[loading=true]/form:before:-ml-$spacing(-1,*)
+    group-data-[loading=true]/form:before:border-2
+    group-data-[loading=true]/form:before:border-solid
+    group-data-[loading=true]/form:before:border-white
+    group-data-[loading=true]/form:before:border-r-transparent
   `,
   prefixIcon: `
     text-$colorTemperature-100