Throbber

htdocs/Throbber.vue

@@ -0,0 +1,57 @@
+<template>
+	<div :class="{ connected, idle }" />
+</template>
+
+<style scoped>
+	div {
+		position: fixed;
+		top: 59px;
+		right: 0;
+		left: 0;
+		height: 0.5rem;
+		z-index: 1030;
+		background-color: #dc3545;
+	}
+	div.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.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.request : false;
+			}
+		}
+	};
+</script>