cbvirtua 1.0.47 → 1.0.48

package/Signature.vue

@@ -364,3 +364,130 @@ onMounted(() => {
   }
 }
 </style>
+<template>
+  <div class="progress-bar">
+      <div class="bg"></div>
+      <div class="bar" :style="{ width: progress + '%' }"></div>
+      <div class="label">{{ progress }}%</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          progress: 0,
+          isPlaying: false,
+          isCompleted: false
+      }
+  },
+  mounted() {
+      this.start();
+  },
+  methods: {
+      start() {
+          this.isPlaying = true;
+          this.animateProgress(90)
+              .then(() => {
+                  if (!this.isCompleted) {
+                      this.animateProgress(100);
+                  }
+              })
+              .catch((error) => {
+                  console.error('Progress error', error);
+              });
+      },
+      animateProgress(target) {
+          return new Promise((resolve, reject) => {
+              let start = this.progress;
+              const end = target;
+              const duration = (target - start) * 150;
+
+              const doAnimation = () => {
+                  const elapsed = Date.now() - startTime;
+                  const progress = Math.min(elapsed / duration, 1);
+
+                  this.progress = start + ((end - start) * progress);
+
+                  if (progress === 1) {
+                      resolve();
+                  } else if (this.isCompleted) {
+                      resolve();
+                  } else {
+                      requestAnimationFrame(doAnimation);
+                  }
+              };
+
+              const startTime = Date.now();
+              requestAnimationFrame(doAnimation);
+          });
+      },
+      finish() {
+          this.isCompleted = true;
+          this.progress = 100;
+      }
+  }
+};
+</script>
+
+<div class="progress" :style="{width, height}">
+  <svg viewBox="0 0 96 96" class="svg-circle-progress" style="width: 96px; height: 96px;">
+      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10" class="svg-progress"
+          style="stroke-dasharray: 275, 279.602;stroke:#eee;">
+      </circle>
+      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10"
+          class="svg-progress"
+          :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`">
+      </circle>
+  </svg>
+  <div class="mask">
+{{ progress}}%
+</div>
+</div>
+<script setup>
+import { ref, toRefs, watch } from 'vue'
+
+const props = defineProps({
+  progress: {
+      type: Number,
+      default: () => 20
+  },
+  color: {
+      type: String,
+      default: () => "#FFAFAF"
+  },
+  width: {
+      type: String,
+      default: () => "210px"
+  },
+  height: {
+      type: String,
+      default: () => "100px"
+  },
+})
+const { height, width, color, progress } = toRefs(props)
+const progressValue = ref((progress.value / 100) * 250)
+
+watch(progress, (newValue) => {
+  progressValue.value = (newValue / 100) * 250
+})
+
+</script>
+<style lang="css" scoped>
+.progress {
+  display: inline-block;
+  position: relative;
+  height: 100px;
+  text-align: center;
+}
+.svg-circle-progress {
+  position: relative;
+  transform: rotate(-90deg);
+}
+.svg-progress {
+  stroke: #2196f3;
+  stroke-linecap: round;
+  transition: all .3s linear;
+}
+</style>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "",
   "main": "index.js",
   "scripts": {