nuVistA/htdocs/Throbber.vue

58 lines
1.1 KiB
Vue
Raw Normal View History

2023-05-01 19:32:23 -04:00
<template>
2023-05-06 08:22:43 -04:00
<div class="throbber" :class="{ connected, idle }" />
2023-05-01 19:32:23 -04:00
</template>
<style scoped>
2023-05-06 08:22:43 -04:00
div.throbber {
2023-05-01 19:32:23 -04:00
position: fixed;
top: 59px;
right: 0;
left: 0;
height: 0.5rem;
z-index: 1030;
background-color: #dc3545;
}
2023-05-06 08:22:43 -04:00
div.throbber.connected {
2023-05-01 19:32:23 -04:00
background-color: #0d6efd;
background-image: repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 10px,
rgba(0, 0, 0, 0.1) 10px,
rgba(0, 0, 0, 0.1) 20px
);
background-size: 200% 200%;
animation: barberpole 60s linear infinite;
animation-direction: reverse;
}
2023-05-06 08:22:43 -04:00
div.throbber.idle {
2023-05-01 19:32:23 -04:00
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
@keyframes barberpole {
100% {
background-position: 100% 100%;
}
}
</style>
<script>
export default {
props: {
client: {
type: Object,
default: null
}
},
computed: {
connected() {
return (this.client) && (this.client.status) && (this.client.status.connected);
},
idle() {
return this.connected ? this.client.status.busy < 1 : false;
}
}
};
</script>