added progressbar

2024-12-19 20:37:51 +00:00 · 2023-07-25 22:34:46 +02:00 · 2023-07-25 22:34:46 +02:00 · f0e0a9fee9
commit f0e0a9fee9
parent 808d42933a
1 changed files with 32 additions and 0 deletions
--- a/web/src/components/Progressbar.vue
+++ b/web/src/components/Progressbar.vue
@ -0,0 +1,32 @@
+<template>
+    <div class="progress-bar-container">
+      <div class="progress-bar" :style="{ width: `${progress}%` }"></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      progress: {
+        type: Number,
+        required: true,
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  .progress-bar-container {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    height: 8px;
+    overflow: hidden;
+  }
+  
+  .progress-bar {
+    background-color: #3498db;
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  </style>
+