Progress Bar Generator
Design a progress bar and get the HTML and CSS to paste into your site. Every change shows up in the preview straight away.
- Free
- No download or sign-up
- Runs in your browser
How to use the code
- Adjust the bar until the preview looks right.
- Press Copy code.
- Paste the
<div>part where the bar should appear in your page, and the<style>part into your CSS or the page's<head>.
To change the progress later with JavaScript, set the width of the inner bar, for example document.querySelector('.progress-fill').style.width = '80%', and update aria-valuenow to match so screen readers announce the new value.
Want to understand every line? Read the progress bar in HTML and CSS tutorial. For a full-screen fake loader instead, use the fake loading screen.
Progress bar generator FAQ
Is the generated code free to use?
Yes. Use it in any personal or commercial project.
Does the progress bar need JavaScript?
No. It is plain HTML and CSS. JavaScript is only needed if you want to change the percentage while the page is open.
Is the progress bar accessible?
Yes. The code includes role="progressbar" and aria-valuenow, aria-valuemin and aria-valuemax, so screen readers can announce it.
More tools
Hacker Text GeneratorLeet speak and glitch text to copy and paste.
Binary TranslatorTranslate text to binary, hex or decimal and back.
Password GeneratorStrong random passwords, made in your browser.
Password Strength CheckerHow long would your password take to crack?
Hacker Name GeneratorCool hacker aliases and usernames.
Hacker TyperThe classic: mash any key, get lines of kernel code.
Hacker SimulatorA full fake hacking dashboard with one click.
Fake Update ScreenWindows, Mac and more: an update that never finishes.