first commit

resources/js/views/demos/components/button/DemoButtonLoaders.vue

@@ -0,0 +1,87 @@
+<script setup>
+const loadings = ref([])
+
+const load = i => {
+  loadings.value[i] = true
+  setTimeout(() => {
+    loadings.value[i] = false
+  }, 3000)
+}
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VBtn
+      :loading="loadings[0]"
+      :disabled="loadings[0]"
+      color="primary"
+      @click="load(0)"
+    >
+      Accept Terms
+    </VBtn>
+
+    <VBtn
+      :loading="loadings[1]"
+      :disabled="loadings[1]"
+      color="secondary"
+      @click="load(1)"
+    >
+      Upload
+      <VIcon
+        end
+        icon="ri-upload-cloud-line"
+      />
+    </VBtn>
+
+    <VBtn
+      :loading="loadings[2]"
+      :disabled="loadings[2]"
+      color="success"
+      @click="load(2)"
+    >
+      Loader slot
+      <template #loader>
+        <span>Loading...</span>
+      </template>
+    </VBtn>
+
+    <VBtn
+      :loading="loadings[3]"
+      :disabled="loadings[3]"
+      color="info"
+      @click="load(3)"
+    >
+      Icon Loader
+      <template #loader>
+        <span class="custom-loader">
+          <VIcon icon="ri-refresh-line" />
+        </span>
+      </template>
+    </VBtn>
+
+    <VBtn
+      :loading="loadings[4]"
+      :disabled="loadings[4]"
+      color="warning"
+      icon="ri-upload-cloud-line"
+      @click="load(4)"
+    />
+  </div>
+</template>
+
+  <style lang="scss" scoped>
+  .custom-loader {
+    display: flex;
+    animation: loader 1s infinite;
+  }
+
+  @keyframes loader {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  </style>