[HTML/CSS] How to Make a Basic Progress Bar w/ Labeling

Hey XPG I'm going to show you how to code a simple progress bar using HTML & CSS.

Step 1 - The CSS

1. Insert the following CSS classes into your page's code.
2. You can edit this to style the bar to your liking.

Spoiler

Code:

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}

[hr]

Step 2 - The HTML

1. Insert the following HTML where you want the progress bar displayed on your site.
2. Change the style property width:70%; and aria-valuenow="70" with the stage you want your progress bar at.

Spoiler

Code:

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

[hr]

Step 3 - Publishing

1. Save your changes
2. Reupload that baby
3. Behold the mighty progress bar!