A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.
Create progress bar with CSS and HTML5
We can use HTML5 and Bootstrap, or define our own CSS styles.
Solution #1 — HTML5
Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.
… <div class="progress" style="width: 50%"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 40% (default style) </div> </div>
Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.
More examples of progress bars below.
… <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"> Success </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%"> Info </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> Warning </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> Danger </div> </div>
Simply and effectively. Sample progress bars:
OK, but maybe we would like to create our own progress bar with CSS. No problem!
Solution #2 — CSS
Assuming we don’t want to use Bootstrap, and we want to have more control easier, we can use a pretty simple CSS trick.
#my-progress-bar { background: #ccc; border-radius: 12px; height: 22px; width: 330px; padding: 0px; margin: 0 auto; } #my-progress-bar:after { content: ''; display: block; background: #0c0; width: 50%; height: 100%; border-radius: 9px; }
Now just show our progress bar:
<div id="my-progress-bar"></div>
Demo:
Resources:
ProBars — jQuery animated progress bars plugin
Slim progress bar jQuery plugin — NProgress
Progress bar with CSS — Summary
As we can see, HTML5, Bootstrap and CSS brings us enough to create progress bars for the web. Simply and without using images.
Thank you and have fun!