Progress bar with CSS and HTML5 in a few lines of code

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:

Progress bars with Bootstrap

OK, but maybe we would like to create our own progress bar with CSS. No problem!

Solution #2 — CSS

виза в германию. Valorant Hacks

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: