traxxx/assets/components/loading/ellipsis.vue

<template>
	<div class="load-container">
		<div class="load-ellipsis">
			<div />
			<div />
			<div />
			<div />
		</div>
	</div>
</template>

<style lang="scss" scoped>
.load-container {
	display: inline-flex;
	position: relative;
	padding: 1rem;
}

.load-ellipsis {
    display: inline-block;
    position: relative;
    width: 5rem;
    height: .75rem;
}

.load-ellipsis div {
    position: absolute;
    top: 0;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--primary);
}

.load-ellipsis div:nth-child(1) {
    left: .5rem;
    animation: load-ellipsis1 0.5s infinite linear;
}

.load-ellipsis div:nth-child(2) {
    left: .5rem;
    animation: load-ellipsis2 0.5s infinite linear;
}

.load-ellipsis div:nth-child(3) {
    left: 2rem;
    animation: load-ellipsis3 0.5s infinite linear;
}

.load-ellipsis div:nth-child(4) {
    left: 3.5rem;
    animation: load-ellipsis4 0.5s infinite linear;
}

@keyframes load-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(0.5);
	}
}

@keyframes load-ellipsis2 {
	0% {
		transform: translate(0, 0) scale(0.5);
	}
	100% {
		transform: translate(1.5rem, 0) scale(1);
	}
}

@keyframes load-ellipsis3 {
	0% {
		transform: translate(0, 0) scale(1);
	}
	100% {
		transform: translate(1.5rem, 0) scale(0.5);
	}
}

@keyframes load-ellipsis4 {
    0% {
		transform: scale(0.5);
    }
    100% {
		transform: scale(0);
    }
}
</style>