From f10608ef63b27e3d4e13a21014b69c2c3e54f8e2 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Thu, 4 Nov 2021 23:49:54 -0400
Subject: [PATCH] Use bootstrap progress bar instead of HTML progress bar

---
 src/PrinterCard.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/PrinterCard.vue b/src/PrinterCard.vue
index 654e4f0..17b9a4f 100644
--- a/src/PrinterCard.vue
+++ b/src/PrinterCard.vue
@@ -12,10 +12,24 @@
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
       <div v-if="status.progress.completion">
-        <div>
+        <div class="d-flex">
           Job Completion:
-          {{ status.progress.completion.toFixed(2) }}%
-          <progress :value="status.progress.completion" max="100"></progress>
+          <div class="progress flex-fill ms-2" style="height: 2em">
+            <div
+              class="progress-bar"
+              :class="{
+                'progress-bar-striped': status.state.flags.printing,
+                'progress-bar-animated': status.state.flags.printing,
+              }"
+              role="progressbar"
+              :style="{ width: status.progress.completion + '%' }"
+              :aria-valuenow="status.progress.completion.toFixed(2)"
+              aria-valuemin="0"
+              aria-valuemax="100"
+            >
+              {{ status.progress.completion.toFixed(2) }}%
+            </div>
+          </div>
         </div>
         <div>
           Job Time: {{ formatDuration(status.progress.printTime) }} elapsed,