dri/src/components/LoadableText.vue

<template>
	<span :class="{ loading: !text }">{{ text }}<span /><span /><span /></span>
</template>

<script>
export default {
	props: {
		text: String,
	},
};
</script>

<style scoped>
span.loading > span {
	display: inline-block;
	background: #000;
	border-radius: 0.09375em;
	width: 0.1875em;
	height: 0.1875em;
	margin: 0.25em 0.075em;
	opacity: 0.5;
}
span.loading > span:nth-child(1) {
	animation: fade 1s ease 0s infinite;
}
span.loading > span:nth-child(2) {
	animation: fade 1s ease 0.333s infinite;
}
span.loading > span:nth-child(3) {
	animation: fade 1s ease 0.666s infinite;
}
@keyframes fade {
	0% {
		opacity: 1;
	}
	33.3% {
		opacity: 0.25;
	}
	66.6% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
}
</style>