HTML and CSS progress bar

Question

I want to create a progress bar like in the below image:

Progress Bar - Image

No idea how to create it.

Would you please give me some help about creating this progress bar?

possible duplicate of [Progress Bar with HTML and CSS](http://stackoverflow.com/questions/7190898/progress-bar-with-html-and-css) — John, Jul 30 '15 at 07:51

Luís P. A. · Answer 1 · 2015-07-30T08:08:55.957

You can use HTML5 progress element

HTML

<progress max="100" value="80"></progress>

CSS

progress {
    height: 16px;
    width: 400px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 24px;
    background: #fff;
    border: solid 2px #e5e5e5;
}
progress::-webkit-progress-bar {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}
progress::-moz-progress-bar {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}

Major modern browsers will run progress element - CANIUSE

DEMO HERE

score 0 · Answer 2 · answered Jul 30 '15 at 08:12

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Try this code. this is what I used for my progress bar.

HTML and CSS progress bar

2 Answers2