Throbber class
This commit is contained in:
parent
39dba30d14
commit
6970c62276
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="{ connected, idle }" />
|
<div class="throbber" :class="{ connected, idle }" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
div {
|
div.throbber {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 59px;
|
top: 59px;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -12,7 +12,7 @@
|
|||||||
z-index: 1030;
|
z-index: 1030;
|
||||||
background-color: #dc3545;
|
background-color: #dc3545;
|
||||||
}
|
}
|
||||||
div.connected {
|
div.throbber.connected {
|
||||||
background-color: #0d6efd;
|
background-color: #0d6efd;
|
||||||
background-image: repeating-linear-gradient(
|
background-image: repeating-linear-gradient(
|
||||||
-45deg,
|
-45deg,
|
||||||
@ -25,7 +25,7 @@
|
|||||||
animation: barberpole 60s linear infinite;
|
animation: barberpole 60s linear infinite;
|
||||||
animation-direction: reverse;
|
animation-direction: reverse;
|
||||||
}
|
}
|
||||||
div.idle {
|
div.throbber.idle {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: visibility 0s 0.5s, opacity 0.5s linear;
|
transition: visibility 0s 0.5s, opacity 0.5s linear;
|
||||||
|
Loading…
Reference in New Issue
Block a user