diff --git a/web-src/src/components/ProgressBar.vue b/web-src/src/components/ProgressBar.vue
index 23364d04..93e45083 100644
--- a/web-src/src/components/ProgressBar.vue
+++ b/web-src/src/components/ProgressBar.vue
@@ -1,26 +1,21 @@
 <template>
-  <div
-    v-if="width > 0"
-    class="progress-bar"
-    :style="{ width: width_percent }"
+  <progress
+    v-if="value > 0"
+    class="progress is-info"
+    :value="value"
+    :max="max"
   />
 </template>
 
 <script>
 export default {
   name: 'ProgressBar',
-  props: ['max', 'value'],
-
-  computed: {
-    width() {
-      if (this.value > 0 && this.max > 0) {
-        return parseInt((this.value * 100) / this.max)
-      }
-      return 0
-    },
-    width_percent() {
-      return `${this.width}%`
-    }
-  }
+  props: ['max', 'value']
 }
 </script>
+
+<style scoped>
+.progress {
+  height: 0.25rem;
+}
+</style>
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 5d0a8623..6c13e62b 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -13,12 +13,6 @@
   }
 }
 
-.progress-bar {
-  background-color: $info;
-  border-radius: 2px;
-  height: 4px;
-}
-
 .media.with-progress h2:last-of-type {
   margin-bottom: 6px;
 }