Yellow design progress bar is a responsive widget template that comes with modish progress bar and attractive effects. The widget is elegantly designed using html5, css3 and bootstrap framework. This can help you create a stand-out user experience that will share and recommend. Make it yours now by using it, downloading it.
Version 2.0 makes the bar a genuine page preloader: it climbs from real progress, finishes once the page has actually loaded, and shows a live percentage badge that tracks its leading edge — v1's own CSS had a counter rule and matching JS, but the element they targeted never existed in the markup, so nothing showed. It adds file-upload.html (the same bar driven by a real upload) and multi-step.html (the same bar as a step indicator), plus a small public API, window.TVProgress.set(element, percent), so you can drive it from anything. The bar now carries role="progressbar" with a live aria-valuenow, and the font is self-hosted.
Features
Template Type:
Free
Compatible Browsers:
Opera, Firefox, Google Chrome
Link hover effetcs:
Yes
Coding:
HTML 5, CSS 3
Additional Features:
Preloaders, Progress Bar, Favicon, Responsive Design
Please note that the images in the template will be blurred in the downloaded package.
Support
Facing issues with this template? Write to support@themevault.net and we'll help you out.
What’s new
v2.0Sep 2026
The bar is a genuine PAGE PRELOADER: it climbs on its own (fast, then slower, like every preloader you've used) and only finishes once the page has actually loaded and a minimum time has passed, then fades out to reveal your real page. The demo page loops instead of fading, so anyone browsing it keeps seeing it work — remove the data-tv-loop attribute before you go live.
A live percentage badge that tracks the bar's leading edge. v1's own CSS had a @keyframes counter rule and JS that wrote into an element called #counter — but no element with that id ever existed in the markup, so it never showed anything.
file-upload.html — the same bar driven by a real file-upload's progress (swap the simulated timer in js/main.js for your xhr.upload.onprogress).
multi-step.html — the same bar as a step indicator across a 3-step form.
A small public API, window.TVProgress.set(element, percent), so you can drive the bar from anything: an upload, a multi-step form, a task queue.
role="progressbar" with a live aria-valuenow — v1 had no accessibility semantics on the bar at all.
Real copy: "Lorem ipsum dolor" -> "Loading your experience".
v1's bar looped on a fixed 10-second CSS animation with no connection to anything actually happening on the page — replaced with a bar driven by real progress.
Hovering the bar now genuinely pauses the climb (v1's CSS rule for this targeted the #counter element that was never in the markup, so it never worked).
No framework in v1, none added: one small stylesheet, one dependency-free js/main.js (replacing v1's inline jQuery snippet). Poppins ships inside the page (woff2, the weights used); nothing is fetched from Google.
Already downloaded this template? Your My Downloads page always serves the latest version — re-download free.
Reviews
No reviews yet — be the first to review this template.
