docs(guide): loader spinner icon demo added

docs/components/demos/loader/DemoLoaderSpinnerIcon.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useDebounceFn, useTimeout } from '@vueuse/core'
+import { ref } from 'vue'
+
+const { ready: btnLoaded, start: startBtnLoading } = useTimeout(1500, { controls: true })
+
+const q = ref('')
+const { ready: inputLoaded, start: startInputLoading } = useTimeout(1000, { controls: true })
+const debouncedStartInputLoading = useDebounceFn(startInputLoading, 500)
+</script>
+
+<template>
+  <div class="grid-row gap-4 grid-flow-row">
+    <!-- 👉 Button -->
+    <ABtn @click="startBtnLoading">
+      <ALoadingIcon
+        icon="i-bx-cloud-upload"
+        :loading="!btnLoaded"
+      />
+      <span>Upload</span>
+    </ABtn>
+
+    <!-- 👉 Input -->
+    <AInput
+      v-model="q"
+      @input="debouncedStartInputLoading"
+    >
+      <template #prepend-inner>
+        <ALoadingIcon
+          icon="i-bx-search"
+          :loading="!inputLoaded"
+        />
+      </template>
+    </AInput>
+  </div>
+</template>

docs/guide/components/loader.md

@@ -47,6 +47,17 @@ You can customize overlay color and opacity via CSS vars `--a-loader-overlay-bg-
 As `ADrawer` & `ADialog` is built on top of `ACard`, you can pass `loading` prop to these components and loader will work without any extra efforts.
 :::
 
+<!-- 👉 Spinner Icon -->
+::::card Spinner Icon
+
+Anu also provides convenient component `ALoadingIcon` for satisfying your custom needs 😇
+
+:::code DemoLoaderSpinnerIcon
+<<< @/components/demos/loader/DemoLoaderSpinnerIcon.vue
+:::
+
+::::
+
 <!-- 👉 Slot and Typography -->
 ::::card Slot and Typography