@bigfishtv/cockpit/styles/components/progress.less

/*
 * Progress
 */

progress {
	display: inline-block;
	height: 1rem;
}

progress[value] {
	appearance: none;
	border: 0;
	color: @primary;
	background: @light-grey;
	border-radius: 0.5rem;
}

progress[value]::-webkit-progress-bar {
	background: transparent;
	border-radius: 0.5rem;
}

progress[value]::-webkit-progress-value {
	background: @primary;
	border-radius: 0.5rem;
	.transition(width @transition-slow ease-in-out);
}

// Queued
progress.indeterminate {
	background: linear-gradient(to right, @grey-100, lighten(@primary, 10%), @grey-100) !important;
	background-size: 400% 400% !important;
	animation: waiting 3s ease infinite;
}

// Firefox styles must be entirely separate or it busts Webkit styles.
@-moz-document url-prefix() {

	progress[value]::-moz-progress-bar {
		background: @primary;
		border-radius: 0.5rem;
	}
}

/*
 * Wating Animation
 */

@-webkit-keyframes waiting {
	0%{
		background-position:0% 50%
	}
	50%{
		background-position:100% 50%
	}
	100%{
		background-position:0% 50%
	}
}

@keyframes waiting { 
	0%{
		background-position:0% 50%
	}
	50%{
		background-position:100% 50%
	}
	100%{
		background-position:0% 50%
	}
}