

@keyframes progress-bar-stripes {
	0% {
		background-position: 50px 0;
	}

	100% {
		background-position: 0 0;
	}
}

@keyframes progress-bar-pulse {
	0% {
		box-shadow: inset 0 0 10px rgba(#fff, 0);
	}

	50% {
		box-shadow: inset 0 0 10px #fff, 0 0 10px rgba(#0058c4, .4);
	}

	100% {
		box-shadow: inset 0 0 10px rgba(#fff, 0);
	}
}


.progress-bar {
	background-color: color(bg-10);
	// border: 1px solid color(border);
	height: 10px;
	// padding: 1px;
	width: 100%;
	border-radius: 6px;
	// animation: progress-bar-pulse 2s linear infinite;

	.progress {
		background-color: color(accent);
		height: 100%;
		border-radius: 6px;
		max-width: 100%;

		transition: width 100ms ease;

		@include gradient-striped();
		background-size: 50px 50px;

		animation: progress-bar-stripes 0.8s linear infinite;
	}
}

progress {
	border: 0;
	height: 10px;
	border-radius: 6px;
	background-color: color(bg-10);
}
progress::-webkit-progress-bar {
	border: 0;
	height: 10px;
	border-radius: 6px;
	background-color: color(bg-10);
}
progress::-webkit-progress-value {
	border: 0;
	height: 10px;
	border-radius: 6px;
	background-color: color(accent);
	transition: width 100ms ease;

	@include gradient-striped();
	background-size: 50px 50px;

	animation: progress-bar-stripes 0.8s linear infinite;
}

progress::-moz-progress-bar {
	border: 0;
	height: 10px;
	border-radius: 6px;
	background-color: color(accent);
	transition: width 100ms ease;

	@include gradient-striped();
	background-size: 50px 50px;

	animation: progress-bar-stripes 0.8s linear infinite;
}
