Progress element with a tooltip
Adding a tooltip to the native progress element showing the percentage of progress.
- No extra elements (only the
<progress>tag) - No inline CSS
- Everything is controlled by the "max" and "value" attributes
- Powered by Scroll-Driven animations, anchor positioning &
@property
It's a Chrome-only experimentation:
See the Pen Upgrading the progress element with modern CSS (Chrome only) by Temani Afif (@t_afif) on CodePen.
Here is another version with a cool animation:
See the Pen Progress element with tooltip II (Chrome only) by Temani Afif (@t_afif) on CodePen.
Related : Circular progress using scroll-driven animations