fixes.

frontend/src/assets/css/style.css

@@ -14,78 +14,10 @@
     border-radius: 15px;
   }
 
-  progress.show-value {
-    position: relative;
-  }
-
-  progress.show-value:after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 50%;
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    font-size: calc(1rem / 1.5);
-    line-height: 1rem;
-    white-space: pre;
-  }
-
-  progress.show-value.is-small:after {
-    font-size: calc(0.75rem / 1.5);
-    line-height: 0.75rem;
-  }
-
-  progress.show-value.is-medium:after {
-    font-size: calc(1.25rem / 1.5);
-    line-height: 1.25rem;
-  }
-
-  progress.show-value.is-large:after {
-    font-size: calc(1.5rem / 1.5);
-    line-height: 1.5rem;
-  }
-
-  table.is-fixed {
-    table-layout: fixed;
-  }
-
-  .progress.is-auto {
-    height: unset;
-    max-height: 35px;
-  }
-
-  .progress-text {
-    margin: 0 50%;
-    position: relative;
-    white-space: pre;
-  }
-
-  div.d-progress {
-    background-color: #ededed;
-    position: relative;
-  }
-
-  div.d-progress-bar {
-    width: 50%;
-    height: 1.5rem;
-    transition: width 150ms;
-  }
-
-  div.d-progress>span.d-progress-text {
-    position: absolute;
-    display: inline-block;
-    left: 50%;
-    transform: translateX(-50%);
-    overflow: hidden;
-    font-size: calc(1.5rem / 1.5);
-    white-space: nowrap;
-  }
-
   .is-bordered-danger {
     border: 1px solid red;
   }
 
-
   html,
   body {
     background-color: #eaeaea;
@@ -116,73 +48,6 @@
       border-radius: 15px;
     }
 
-    progress.show-value {
-      position: relative;
-    }
-
-    progress.show-value:after {
-      content: attr(data-text);
-      position: absolute;
-      top: 0;
-      left: 50%;
-      -ms-transform: translateX(-50%);
-      transform: translateX(-50%);
-      font-size: calc(1rem / 1.5);
-      line-height: 1rem;
-      white-space: pre;
-    }
-
-    progress.show-value.is-small:after {
-      font-size: calc(0.75rem / 1.5);
-      line-height: 0.75rem;
-    }
-
-    progress.show-value.is-medium:after {
-      font-size: calc(1.25rem / 1.5);
-      line-height: 1.25rem;
-    }
-
-    progress.show-value.is-large:after {
-      font-size: calc(1.5rem / 1.5);
-      line-height: 1.5rem;
-    }
-
-    table.is-fixed {
-      table-layout: fixed;
-    }
-
-    .progress.is-auto {
-      height: unset;
-      max-height: 35px;
-    }
-
-    .progress-text {
-      margin: 0 50%;
-      position: relative;
-      white-space: pre;
-    }
-
-    div.d-progress {
-      background-color: #ededed;
-      position: relative;
-    }
-
-    div.d-progress-bar {
-      width: 50%;
-      height: 1.5rem;
-      transition: width 150ms;
-    }
-
-    div.d-progress>span.d-progress-text {
-      position: absolute;
-      display: inline-block;
-      left: 50%;
-      transform: translateX(-50%);
-      overflow: hidden;
-      font-size: calc(1.5rem / 1.5);
-      white-space: nowrap;
-    }
-
     .is-bordered-danger {
       border: 1px solid red;
     }
@@ -191,11 +56,6 @@
       background-color: #fff;
     }
 
-    div.d-progress {
-      background-color: #999999;
-      color: #313131;
-    }
-
     html,
     body {
       background-color: #000000;

frontend/src/components/Page-Downloading.vue

@@ -39,9 +39,10 @@
         <div class="card-content">
           <div class="columns is-multiline">
             <div class="column is-12">
-              <progress class="progress is-large is-success show-value" :data-text="updateProgress(item)"
+              <div id="progress-bar" class="is-round">
-                :value="item.percent ? percentPipe(item.percent) : '100'" max="100">
+                <div id="progress-percentage">{{ updateProgress(item) }}</div>
-              </progress>
+                <div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
+              </div>
             </div>
             <div class="column is-4 has-text-centered">
               <span class="icon-text">
@@ -204,3 +205,34 @@ const updateProgress = (item) => {
   return string;
 }
 </script>
+
+<style scoped>
+#progress-bar {
+  border-radius: 15px;
+  position: relative;
+  width: 100%;
+  height: 30px;
+  background-color: gray;
+}
+
+#progress,
+#progress-percentage {
+  border-radius: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#progress-percentage {
+  text-align: center;
+  z-index: 2;
+  line-height: 30px;
+}
+
+#progress {
+  z-index: 1;
+  background-color: green;
+}
+</style>