Search
Learn
Share

Progress bar in CSS and HTML5!

Published by Profile Image DirectCode on 12 May, 2016
186 views
How to render progress bars on the web project, without using images? It's simple!

One of the ways is to add Bootstrap and jQuery to our web page, and a simple code as in following example:

...
<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>
...

It's simple to adjust class and other parameters, to get the result we want. For example:

<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>

Another way is to define own CSS:

#x-progress-bar {
background: #ccc;
border-radius: 14px;
height: 22px;
width: 333px;
padding: 0px;
margin: 0 auto;
}

#x-progress-bar:after {
content: '';
display: block;
background: #0c0;
width: 50%;
height: 100%;
border-radius: 10px;
}

And then just render the progress bar:

<div id="x-progress-bar"></div>

That's it. More about you can find here.

Thank you!