Qu'est-ce que Calculateur de fonction CSS progress() ?
La fonction CSS progress() est une fonction de mappage mathematique (Chrome 138+) qui convertit une valeur d'entree d'une plage numerique en une valeur de progression comprise entre 0 et 1. Par exemple, progress(scroll-position from 0 to 500) renvoie 0 lorsque la position de defilement est 0, 1 lorsqu'elle atteint 500 et 0,5 a 250.
Réponse rapide
Utilisez progress(input from min to max) pour mapper toute valeur numerique sur une plage 0-1. Chrome 138+. Enveloppez dans clamp(0, ..., 1) pour limiter la sortie.
Last updated: 2026-05-30
Limites
- Necessite Chrome 138+. Firefox et Safari ne la supportent pas.
- Ne fonctionne qu'avec les proprietes numeriques.
- scroll-position mesure le document par defaut.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Saisissez la source d'entree et sa plage (scroll-position, viewport, propriete personnalisee).
- Definissez la propriete CSS cible et sa valeur aux progressions 0 et 1.
- Activez clamp() pour borner le resultat.
- Copiez le CSS genere incluant progress() et la declaration complete.
A quoi il sert
- Controler l'opacite d'un en-tete colle au defilement.
- Mettre a l'echelle une image hero selon la largeur de la fenetre.
- Controler un pourcentage color-mix() base sur le defilement.