Skip to main content
CSS Tip

Progress element with a tooltip

Adding a tooltip to the native progress element showing the percentage of progress.

CSS-only progress element with a tooltip

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


More CSS Tips