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() {