added large option

resources/js/components/SMLoadingIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sm-loading-icon-balls">
+    <div :class="['loading-icon-balls', { large: props.large }]">
         <div></div>
         <div></div>
         <div></div>
@@ -7,8 +7,18 @@
     </div>
 </template>
 
+<script setup lang="ts">
+const props = defineProps({
+    large: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+</script>
+
 <style lang="scss">
-.sm-loading-icon-balls {
+.loading-icon-balls {
     display: inline-block;
     position: relative;
     width: 3em;
@@ -20,7 +30,7 @@
         width: 0.5em;
         height: 0.5em;
         border-radius: 50%;
-        background: var(--base-color-light);
+        background: var(--base-color-text);
         animation-timing-function: cubic-bezier(0, 1, 1, 0);
     }
     div:nth-child(1) {
@@ -39,6 +49,26 @@
         left: 2.1em;
         animation: sm-loading-icon3 0.6s infinite;
     }
+
+    &.large {
+        div {
+            width: 1.5em;
+            height: 1.5em;
+        }
+        div:nth-child(1) {
+            left: 0em;
+        }
+        div:nth-child(2) {
+            left: 0em;
+        }
+        div:nth-child(3) {
+            left: 3em;
+        }
+        div:nth-child(4) {
+            left: 6em;
+        }
+    }
+
     @keyframes sm-loading-icon1 {
         0% {
             transform: scale(0);
@@ -60,7 +90,7 @@
             transform: translate(0, 0);
         }
         100% {
-            transform: translate(0.9em, 0);
+            transform: translate(3em, 0);
         }
     }
 }