james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

icon animation

Browse Source
This commit is contained in:
Nazar Kanaev 2020-09-01 20:41:02 +01:00
parent faa41e482a
commit 6dcb75c450
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/index.html
View File

@ -13,7 +13,7 @@
<div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: feedListWidth+'px'}"> <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> <drag :width="feedListWidth" @resize="resizeFeedList"></drag>
<div class="p-2 toolbar d-flex align-items-center" style="padding-bottom: 1px;"> <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"> <div class="text-truncate cursor-default noselect">
<span v-if="loading.feeds">Refreshing ({{loading.feeds}} left)</span> <span v-if="loading.feeds">Refreshing ({{loading.feeds}} left)</span>
</div> </div>
@ -190,10 +190,10 @@
<span class="icon">{% inline "sliders.svg" %}</span> <span class="icon">{% inline "sliders.svg" %}</span>
</button> </button>
<button class="toolbar-item" <button class="toolbar-item"
:class="{loading: loading.readability, active: itemSelectedReadability}" :class="{active: itemSelectedReadability}"
@click="getReadable(itemSelectedDetails)" @click="getReadable(itemSelectedDetails)"
v-b-tooltip.hover.bottom="'Read Here'"> 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> </button>
<a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'"> <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
<span class="icon">{% inline "external-link.svg" %}</span> <span class="icon">{% inline "external-link.svg" %}</span>

21
assets/stylesheets/app.css
View File

@ -201,14 +201,14 @@ select.form-control:not([multiple]):not([size]) {
transform: rotate(90deg); transform: rotate(90deg);
} }
@keyframes loading { @keyframes stroke {
0% { from { stroke-dashoffset: 120; }
transform: rotate(0) to { stroke-dashoffset: 0; }
} }
100% { @keyframes rotate {
transform: rotate(360deg) from { transform: rotate(0); }
} to { transform: rotate(360deg); }
} }
.loading { .loading {
@ -219,7 +219,7 @@ select.form-control:not([multiple]):not([size]) {
} }
.loading::after { .loading::after {
animation: loading .5s infinite linear; animation: rotate .5s infinite linear;
border: .1rem solid #6c757d; border: .1rem solid #6c757d;
border-radius: 50%; border-radius: 50%;
border-right-color: transparent; border-right-color: transparent;
@ -236,6 +236,11 @@ select.form-control:not([multiple]):not([size]) {
z-index: 1; z-index: 1;
} }
.icon-loading > svg {
animation: stroke 2s infinite normal;
stroke-dasharray: 60;
}
.btn-default { .btn-default {
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: .25rem; border-radius: .25rem;