mediawiki-skins-Citizen/resources/skins.citizen.styles/common/progressbar.less

/**
 * Loading indicator
 * Based on Vector
 *
 * By adding a class on the parent search form
 * <div class=".citizen-loading"></div>
 * A pseudo element is added via ':after' that adds the loading indicator.
 *
 * After appearing for more than a second, a progress-bar animation appears
 * above the loading indicator.
 *
 **/
.citizen-loading:after {
	--height-progress-bar: @height-progress-bar;
	z-index: 999;
	display: block;
	overflow: hidden;
	width: 100%;
	// Hide text in case it extends beyond the input.
	height: var( --height-progress-bar );
	// Ensure it doesn't extend beyond the input.
	box-sizing: border-box;
	// Animates the progress-bar.
	animation: progress-bar
		/* duration */ 1200ms
		/* timing function */ linear
		/* delay */ 500ms
		/* iteration count */ infinite
		/* fill direction */ alternate;
	// Add a progress-bar to the loading indicator,
	// but only show it animating after 1 second of loading.
	background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
		/* position / size*/ -10% 0 ~'/' 0 var( --height-progress-bar )
		/* repeat */ no-repeat,transparent;
	// Align style with the form
	border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
	// Placeholder text
	content: 'loading';
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes progress-bar {
	0% {
		background-position: -10% 0;
		background-size: 0 var( --height-progress-bar );
	}

	30% {
		background-position: -10% 0;
		background-size: 30% var( --height-progress-bar );
	}

	70% {
		background-position: 110% 0;
		background-size: 30% var( --height-progress-bar );
	}

	100% {
		background-position: 110% 0;
		background-size: 0 var( --height-progress-bar );
	}
}

// On page unload
html.citizen-loading:after {
	position: fixed;
	top: 0;
}