Improved Loading spinner
This commit is contained in:
parent
01d3c27d82
commit
6868833854
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<template v-if="user.authenticated">
|
||||
<div class="menu-wrapper">
|
||||
<div class="ui secondary menu">
|
||||
<router-link to="/" class="item" v-lang.nav.home></router-link>
|
||||
<router-link to="/books" class="item" v-lang.nav.books></router-link>
|
||||
|
@ -16,8 +17,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<router-view/>
|
||||
</div>
|
||||
|
||||
<div class="lang-switcher">
|
||||
<a @click="language = 'en'"><i class="gb flag"></i></a>
|
||||
|
@ -107,4 +111,69 @@ export default {
|
|||
transition: color .1s ease;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
/* spinner */
|
||||
.fullscreen-loader-wrapper {
|
||||
position: fixed;
|
||||
background: rgba(250,250,250,0.8);
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.half-circle-spinner, .half-circle-spinner * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.half-circle-spinner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
left: calc(50% - 30px);
|
||||
top: calc(50% - 30px);
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: calc(60px / 10) solid transparent;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-1 {
|
||||
border-top-color: #4CAF50;
|
||||
animation: half-circle-spinner-animation 1s infinite;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-2 {
|
||||
border-bottom-color: #4CAF50;
|
||||
animation: half-circle-spinner-animation 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes half-circle-spinner-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1>{{ author.forename }} {{ author.lastname }}</h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1 v-lang.authors.title></h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
@ -181,6 +183,7 @@ export default {
|
|||
DeleteAuthor (obj) {
|
||||
this.showModal = true
|
||||
this.$on('delete-submit', function () {
|
||||
this.loading = true
|
||||
// Prevent deleting already deleted authors
|
||||
if (obj) {
|
||||
HTTP.delete('authors/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1>{{ book.title }}</h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1 v-lang.books.title></h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
@ -235,6 +237,7 @@ export default {
|
|||
deleteBook (obj) {
|
||||
this.showModal = true
|
||||
this.$on('delete-submit', function () {
|
||||
this.loading = true
|
||||
// Prevent deleting already deleted books
|
||||
if (obj) {
|
||||
HTTP.delete('books/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1>{{ item.title }}</h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1 v-lang.items.title></h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
@ -188,6 +190,7 @@ export default {
|
|||
DeleteItem (obj) {
|
||||
this.showModal = true
|
||||
this.$on('delete-submit', function () {
|
||||
this.loading = true
|
||||
// Prevent deleting already deleted item
|
||||
if (obj) {
|
||||
HTTP.delete('items/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1>{{ publisher.name }}</h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
<div v-if="user.authenticated">
|
||||
<h1 v-lang.publishers.title></h1>
|
||||
|
||||
<div class="ui info message" v-if="loading">
|
||||
<icon name="refresh" spin></icon>
|
||||
<span v-lang.general.loading></span>
|
||||
<div class="fullscreen-loader-wrapper" v-if="loading">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading">
|
||||
|
@ -180,6 +182,7 @@ export default {
|
|||
DeletePublisher (obj) {
|
||||
this.showModal = true
|
||||
this.$on('delete-submit', function () {
|
||||
this.loading = true
|
||||
// Prevent again deleting already deleted publishers
|
||||
if (obj) {
|
||||
HTTP.delete('publishers/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
|
||||
|
|
Loading…
Reference in New Issue