Progress Bar V09
Template Details
Author: Colorlib
Released: September 2026
License: CC BY 3.0
Description
A long-form article page with a slim header fixed to the top that shows the site name, the article title and the minutes left. A thin gradient bar along the bottom edge of the header grows as the reader scrolls through the article and reports its value as a progressbar. It suits blogs, magazines, documentation and newsletters on the web.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 930 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Progress measured against the article, not the whole page
- Minutes-left counter that switches to Finished at the end
- Scroll handling throttled with requestAnimationFrame and a passive listener
- GPU-friendly scaleX fill, no layout thrash
- Serif reading typography with a drop cap and pull quote
Similar Templates
