diff --git a/client/components/Reader/ProgressPage/ProgressPage.vue b/client/components/Reader/ProgressPage/ProgressPage.vue
index 68a29d00..496d1214 100644
--- a/client/components/Reader/ProgressPage/ProgressPage.vue
+++ b/client/components/Reader/ProgressPage/ProgressPage.vue
@@ -15,7 +15,10 @@
{{ percentage }}%
-
{{ text }}
+
+ {{ text }}
+
+
@@ -24,6 +27,7 @@
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
+import * as utils from '../../../share/utils';
const ruMessage = {
'start': ' ',
@@ -46,12 +50,15 @@ class ProgressPage extends Vue {
step = 1;
progress = 0;
visible = false;
+ iconStyle = '';
show() {
this.text = '';
this.totalSteps = 1;
this.step = 1;
this.progress = 0;
+ this.iconAngle = 0;
+ this.ani = false;
this.visible = true;
}
@@ -59,6 +66,7 @@ class ProgressPage extends Vue {
hide() {
this.visible = false;
this.text = '';
+ this.iconAngle = 0;
}
setState(state) {
@@ -72,6 +80,16 @@ class ProgressPage extends Vue {
this.step = (state.step ? state.step : this.step);
this.totalSteps = (state.totalSteps > this.totalSteps ? state.totalSteps : this.totalSteps);
this.progress = state.progress || 0;
+
+ if (!this.ani) {
+ (async() => {
+ this.ani = true;
+ this.iconAngle += 30;
+ this.iconStyle = `transform: rotate(${this.iconAngle}deg); transition: 150ms linear`;
+ await utils.sleep(150);
+ this.ani = false;
+ })();
+ }
}
get percentage() {