Добавил ProgressPage

client/api/reader.js

@@ -29,7 +29,7 @@ class Reader {
                         if (callback)
                             callback(Object.assign({}, 
                                 response.data, 
-                                {state: 'loading', stage: 4, progress: Math.round((progress.loaded*100)/progress.total)}
+                                {state: 'loading', step: 4, progress: Math.round((progress.loaded*100)/progress.total)}
                             ));
                     }
                 }

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -19,6 +19,7 @@
             <span class="bottom-span clickable" @click="openHelp">Справка</span>
             <span class="bottom-span">{{ version }}</span>
         </div>
+        <ProgressPage ref="progress"></ProgressPage>
     </div>
 </template>
 
@@ -27,12 +28,17 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
+import ProgressPage from '../ProgressPage/ProgressPage.vue';
 import readerApi from '../../../api/reader';
 
 export default @Component({
+    components: {
+        ProgressPage
+    }
 })
 class LoaderPage extends Vue {
     bookUrl = null;
+    loadPercent = 0;
 
     created() {
         this.commit = this.$store.commit;
@@ -40,6 +46,10 @@ class LoaderPage extends Vue {
         this.config = this.$store.state.config;
     }
 
+    mounted() {
+        this.progress = this.$refs.progress;
+    }
+
     activated() {
         this.$refs.input.focus();
     }
@@ -57,15 +67,15 @@ class LoaderPage extends Vue {
 
     async submitUrl() {
         if (this.bookUrl) {
-            const loading = this.$loading({target: this.$refs.main, customClass: 'loading'});
+            this.progress.show();
+            this.progress.setState({totalSteps: 4});
             try {
                 const book = await readerApi.loadBook(this.bookUrl, (state) => {
-                    const progress = state.progress || 0;
+                    this.progress.setState(state);
-                    loading.text = `${state.state} ${progress}%`;
                 });
-                loading.close();
+                this.progress.hide();
             } catch (e) {
-                loading.close();
+                this.progress.hide();
                 this.$alert(e.message, 'Ошибка', {type: 'error'});
             }
         }
@@ -89,14 +99,6 @@ class LoaderPage extends Vue {
 }
 //-----------------------------------------------------------------------------
 </script>
-<style>
-.loading {
-    background-color: rgba(0, 0, 0, 0.8);
-}
-.el-loading-text {
-    color: #ffffff !important;
-}
-</style>
 <style scoped>
 .main {
     flex: 1;

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -0,0 +1,93 @@
+<template>
+    <div v-show="visible" class="main">
+        <div class="center">
+            <el-progress type="circle" :width="100" :stroke-width="5" color="green" :percentage="percentage"></el-progress>
+            <p class="text">{{ text }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+const ruMessage = {
+    'start': '',
+    'fninish': '',
+    'download': 'скачивание',
+    'decompress': 'распаковка',
+    'convert': 'конвертирование',
+    'loading': 'загрузка',
+    'parse': 'обработка',
+};
+
+export default @Component({
+})
+class ProgressPage extends Vue {
+    text = '';
+    totalSteps = 1;
+    step = 1;
+    progress = 0;
+    visible = false;
+
+    show() {
+        this.$el.style.width = this.$parent.$el.offsetWidth + 'px';
+        this.$el.style.height = this.$parent.$el.offsetHeight + 'px';
+        this.text = '';
+        this.totalSteps = 1;
+        this.step = 1;
+        this.progress = 0;
+
+        this.visible = true;
+    }
+
+    hide() {
+        this.visible = false;
+    }
+
+    setState(state) {
+        this.text = (ruMessage[state.state] ? ruMessage[state.state] : state.state);
+        this.step = (state.step ? state.step : this.step);
+        this.totalSteps = (state.totalSteps > this.totalSteps ? state.totalSteps : this.totalSteps);
+        this.progress = (state.progress ? state.progress : this.progress);
+    }
+
+    get percentage() {
+        return Math.round(((this.step - 1)/this.totalSteps + this.progress/(100*this.totalSteps))*100);
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+<style scoped>
+.main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.8);
+
+    position: absolute;
+}
+.center {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    color: white;
+    height: 300px;
+}
+
+.text {
+    color: yellow;
+}
+
+</style>
+<style>
+.el-progress__text {
+    color: lightgreen;
+}
+</style>

client/components/Reader/TextPage/TextPage.vue

@@ -12,8 +12,6 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class TextPage extends Vue {
-    bookUrl = null;
-
     created() {
         this.commit = this.$store.commit;
         this.dispatch = this.$store.dispatch;

client/element.js

@@ -50,6 +50,9 @@ import './theme/main.css';
 import ElInput from 'element-ui/lib/input';
 import './theme/input.css';
 
+import ElProgress from 'element-ui/lib/progress';
+import './theme/progress.css';
+
 import Notification from 'element-ui/lib/notification';
 import './theme/notification.css';
 
@@ -62,7 +65,7 @@ import './theme/message-box.css';
 const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
-    ElInput
+    ElInput, ElProgress
 };
 
 for (let [name, comp] of Object.entries(components)) {