loading animation

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

View File

@ -111,7 +111,7 @@
<option value=""></option>
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
</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 v-else-if="settings=='manage'">
<div v-for="folder in foldersWithFeeds" class="mb-4">

View File

@ -142,3 +142,38 @@ select.form-control:not([multiple]):not([size]) {
border-color: var(--color-primary);
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;
}