first commit

resources/js/views/demos/components/progress-linear/DemoProgressLinearBuffering.vue

@@ -0,0 +1,36 @@
+<script setup>
+const modelValue = ref(10)
+const bufferValue = ref(20)
+const interval = ref()
+
+const startBuffer = () => {
+  clearInterval(interval.value)
+  interval.value = setInterval(() => {
+    modelValue.value += Math.random() * (15 - 5) + 5
+    bufferValue.value += Math.random() * (15 - 5) + 6
+  }, 2000)
+}
+
+onMounted(startBuffer)
+onBeforeUnmount(() => {
+  clearInterval(interval.value)
+})
+watch(modelValue, () => {
+  if (modelValue.value < 100)
+    return false
+  modelValue.value = 0
+  bufferValue.value = 10
+  startBuffer()
+})
+</script>
+
+<template>
+  <div class="demo-space-y">
+    <VProgressLinear
+      v-model="modelValue"
+      color="primary"
+      height="8"
+      :buffer-value="bufferValue"
+    />
+  </div>
+</template>