Throbber class

This commit is contained in:
Jiang Yio 2023-05-06 08:22:43 -04:00
parent 39dba30d14
commit 6970c62276

View File

@ -1,9 +1,9 @@
<template>
<div :class="{ connected, idle }" />
<div class="throbber" :class="{ connected, idle }" />
</template>
<style scoped>
div {
div.throbber {
position: fixed;
top: 59px;
right: 0;
@ -12,7 +12,7 @@
z-index: 1030;
background-color: #dc3545;
}
div.connected {
div.throbber.connected {
background-color: #0d6efd;
background-image: repeating-linear-gradient(
-45deg,
@ -25,7 +25,7 @@
animation: barberpole 60s linear infinite;
animation-direction: reverse;
}
div.idle {
div.throbber.idle {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;