@shower/ribbon/styles/blocks/progress.css

Ribbon theme for Shower HTML presentation engine

/* Progress */

.progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: var(--progress-size);
	overflow: hidden;
	transition: all 0.2s linear;
}

.progress::before {
	display: block;
	width: 100%;
	height: var(--progress-size);
	background-color: var(--color-blue);
	transform: skewX(45deg);
	transform-origin: 0 100%;
	content: '';
}

.progress[style*='100%']::before {
	transform: none;
}

/* List */

.shower.list .progress {
	display: none;
}

/* Full */

.shower.full .progress {
	display: block;
}

/* Print */

@media print {
	.shower.list .progress,
	.shower.full .progress {
		display: none;
	}
}