Initial commit

resources/js/views/demos/components/progress-circular/DemoProgressCircularRotate.vue

@@ -0,0 +1,59 @@
+<script setup>
+const interval = ref()
+const progressValue = ref(0)
+
+onMounted(() => {
+  interval.value = setInterval(() => {
+    if (progressValue.value === 100)
+      return progressValue.value = 0
+    progressValue.value += 10
+  }, 1000)
+})
+onBeforeUnmount(() => {
+  clearInterval(interval.value)
+})
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VProgressCircular
+      :rotate="360"
+      :size="70"
+      :width="6"
+      :model-value="progressValue"
+      color="primary"
+    >
+      {{ progressValue }}
+    </VProgressCircular>
+
+    <VProgressCircular
+      :rotate="90"
+      :size="70"
+      :width="6"
+      :model-value="progressValue"
+      color="primary"
+    >
+      {{ progressValue }}
+    </VProgressCircular>
+
+    <VProgressCircular
+      :rotate="170"
+      :size="70"
+      :width="6"
+      :model-value="progressValue"
+      color="primary"
+    >
+      {{ progressValue }}
+    </VProgressCircular>
+
+    <VProgressCircular
+      :rotate="-90"
+      :size="70"
+      :width="6"
+      :model-value="progressValue"
+      color="primary"
+    >
+      {{ progressValue }}
+    </VProgressCircular>
+  </div>
+</template>