From 6dcb75c450c36f797d921a5cca9154fbbc3c38dc Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Tue, 1 Sep 2020 20:41:02 +0100
Subject: [PATCH] icon animation

---
 assets/index.html          |  6 +++---
 assets/stylesheets/app.css | 21 +++++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index 88f6e1a..de2af45 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -13,7 +13,7 @@
         <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
             <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
             <div class="p-2 toolbar d-flex align-items-center" style="padding-bottom: 1px;">
-                <div class="icon mx-2" :class="{loading: loading.feeds}">{% inline "anchor.svg" %}</div>
+                <div class="icon mx-2" :class="{'icon-loading': loading.feeds}">{% inline "anchor.svg" %}</div>
                 <div class="text-truncate cursor-default noselect">
                     <span v-if="loading.feeds">Refreshing ({{loading.feeds}} left)</span>
                 </div>
@@ -190,10 +190,10 @@
                     <span class="icon">{% inline "sliders.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
-                        :class="{loading: loading.readability, active: itemSelectedReadability}"
+                        :class="{active: itemSelectedReadability}"
                         @click="getReadable(itemSelectedDetails)"
                         v-b-tooltip.hover.bottom="'Read Here'">
-                    <span class="icon">{% inline "book-open.svg" %}</span>
+                    <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
                 </button>
                 <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
                     <span class="icon">{% inline "external-link.svg" %}</span>
diff --git a/assets/stylesheets/app.css b/assets/stylesheets/app.css
index d1acd5b..cdc62ce 100644
--- a/assets/stylesheets/app.css
+++ b/assets/stylesheets/app.css
@@ -201,14 +201,14 @@ select.form-control:not([multiple]):not([size]) {
   transform: rotate(90deg);
 }
 
-@keyframes loading {
-  0% {
-    transform: rotate(0)
-  }
+@keyframes stroke {
+  from { stroke-dashoffset: 120; }
+  to   { stroke-dashoffset: 0; }
+}
 
-  100% {
-    transform: rotate(360deg)
-  }
+@keyframes rotate {
+  from { transform: rotate(0); }
+  to   { transform: rotate(360deg); }
 }
 
 .loading {
@@ -219,7 +219,7 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 .loading::after {
-  animation: loading .5s infinite linear;
+  animation: rotate .5s infinite linear;
   border: .1rem solid #6c757d;
   border-radius: 50%;
   border-right-color: transparent;
@@ -236,6 +236,11 @@ select.form-control:not([multiple]):not([size]) {
   z-index: 1;
 }
 
+.icon-loading > svg {
+  animation: stroke 2s infinite normal;
+  stroke-dasharray: 60;
+}
+
 .btn-default {
   border: 1px solid #ced4da;
   border-radius: .25rem;