nuVistA/htdocs/Throbber.vue

<template>
	<div class="throbber" :class="{ connected, idle }" />
</template>

<style scoped>
	div.throbber {
		position: fixed;
		top: 59px;
		right: 0;
		left: 0;
		height: 0.5rem;
		z-index: 1030;
		background-color: #dc3545;
	}
	div.throbber.connected {
		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;
	}
	div.throbber.idle {
		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>