<div class="progress-bar indeterminate bg-card/50 backdrop-blur-md">
	<div class="short-bar"></div>
	<div class="long-bar"></div>
</div>

<style>
	@keyframes progressbarindeterminateshort {
		0% {
			left: -40%;
		}

		75% {
			left: 120%;
		}

		100% {
			left: 120%;
		}
	}

	@keyframes progressbarindeterminatelong {
		0% {
			left: -90%;
		}

		37.5% {
			left: -90%;
		}

		100% {
			left: 100%;
		}
	}

	.progress-bar {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		top: 0;
		left: 0;
		right: 0;
		min-height: 5px;
		position: absolute;
		border-radius: 1.5px;
		overflow: hidden !important;
	}

	.progress-bar > .short-bar {
		background-color: var(--accent);
		width: 40%;
		height: 100%;
		left: -40%;
		border-radius: 2.5px;
		position: absolute;
		display: inline-block;
		-webkit-animation: progressbarindeterminateshort 2s ease-in-out infinite;
		-moz-animation: progressbarindeterminateshort 2s ease-in-out infinite;
		-o-animation: progressbarindeterminateshort 2s ease-in-out infinite;
		animation: progressbarindeterminateshort 2s ease-in-out infinite;
	}

	.progress-bar > .long-bar {
		background-color: var(--accent);
		width: 60%;
		height: 100%;
		left: -90%;
		border-radius: 2.5px;
		position: absolute;
		display: inline-block;
		-webkit-animation: progressbarindeterminatelong 2s ease-in-out infinite;
		-moz-animation: progressbarindeterminatelong 2s ease-in-out infinite;
		-o-animation: progressbarindeterminatelong 2s ease-in-out infinite;
		animation: progressbarindeterminatelong 2s ease-in-out infinite;
	}
</style>
