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> <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;