james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-07-08 16:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

loading animation

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-01 15:12:51 +01:00
parent b3c6a9e252
commit 14781476e0
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
template/index.html
View File

@ -111,7 +111,7 @@
<option value=""></option> <option value=""></option>
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option> <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
</select> </select>
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button> <button class="btn btn-block btn-outline-secondary mt-3 loading" type="button">Add</button>
</div> </div>
<div v-else-if="settings=='manage'"> <div v-else-if="settings=='manage'">
<div v-for="folder in foldersWithFeeds" class="mb-4"> <div v-for="folder in foldersWithFeeds" class="mb-4">

35
template/static/stylesheets/app.css
View File

@ -142,3 +142,38 @@ select.form-control:not([multiple]):not([size]) {
border-color: var(--color-primary); border-color: var(--color-primary);
background-color: transparent; background-color: transparent;
} }
@keyframes loading {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.loading {
color: transparent!important;
min-height: .8rem;
pointer-events: none;
position: relative;
}
.loading::after {
animation: loading .5s infinite linear;
border: .1rem solid #6c757d;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1rem;
width: 1rem;
left: 50%;
margin-left: -.5rem;
margin-top: -.5rem;
position: absolute;
top: 50%;
z-index: 1;
}