From 6f80900aa898a6847059f88d4acb54b4b994fc0a Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Sat, 8 Feb 2020 20:12:55 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D1=81=D0=BB=D0=B5=D1=88=D0=B0=20=D0=BD=D0=B0=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/ProgressPage/ProgressPage.vue      | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

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 @@
                 <span class="text-yellow">{{ percentage }}%</span>
             </q-circular-progress>
 
-            <p class="text-yellow">{{ text }}</p>
+            <div>
+                <span class="text-yellow">{{ text }}</span>
+                <q-icon :style="iconStyle" color="yellow" name="la la-slash" size="20px"/>
+            </div>
         </div>
     </div>
 </template>
@@ -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() {