Displaying progress bar and a progress editor.

assets/js/pages/progressbar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="progress" style="height: 2px;">
+      <div class="progress-bar" role="progressbar" :style="{width:progress+'%'}"></div>
+      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {EventBus} from "../event-bus";
+
+export default {
+  name: 'Progressbar',
+  components: {
+    EventBus
+  },
+  props: {
+    totalPages: Number,
+    readPages: Number
+  },
+  data() {
+    return {
+      newProgress: this.readPages
+    }
+  },
+  computed: {
+    progress() {
+      return Math.round(this.newProgress / this.totalPages * 100);
+    }
+  },
+  mounted() {
+  },
+  created() {
+    window.EventBus.$on('updateProgress', (data) => {
+      this.newProgress = data.readPages;
+      console.info(this.newProgress);
+      console.info(this.progress);
+    });
+  },
+  methods: {}
+}
+</script>