CSS Scroll-driven barre de progression

• animation-timeline
• @keyframes
• transformation

Votre navigateur ne supporte pas cette démonstration

Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

Idéal à mettre en place sur des articles afin d'indiquer à vos visiteurs le contenu restant à lire à mesure qu'ils défilent la page.

<div id="progress">
</div>

#progress{
animation: anim-duration 1s linear;
animation-timeline: scroll();
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:4px;
transform-origin: 0 0;
background-color:#6753ea
	
	}	

@keyframes anim-duration {

	from {transform:scaleX(0);
		
	}
	to {
		transform: scaleX(1);
	}
	}