Progress bars (CSS & HTML)

index.html

<h3> A standalone progress bar </h3>

<div class="fprogress" >
  <div class="fprogress-bar" id="fA" style="width:90%"> <!-- Edit progress % here -->
    <div class="fbox" id="fA" style="width: 232px"> <!-- Edit shaded area here -->
      <span class="ftext">A Standalone Progress Bar</span> 
    </div>
  </div>
</div>

<hr />

<h3> Two-column progress bar </h3>

<table border="0" id="ftable2">
  <tbody>
    <tr>
      <td>
        <div class="fprogress" >
          <div class="fprogress-bar" id="fB" style="width:45%"> <!-- Edit progress % here -->
            <div class="fbox" id="fB" style="width: 85px"> <!-- Edit shaded area here -->
              <span class="ftext">Column 1</span> 
            </div>
  				</div>
				</div>
			</td>
      <td>
        <div class="fprogress" >
          <div class="fprogress-bar" id="fB" style="width:5%"> <!-- Edit progress % here -->
            <div class="fbox" id="fB" style="width: 85px"> <!-- Edit shaded area here -->
              <span class="ftext">Column 2</span> 
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<hr />

<h3> Three-column progress bar </h3>

<table border="0" id="ftable3">
  <tbody>
    <tr>
      <td>
        <div class="fprogress" >
          <div class="fprogress-bar" id="fC" style="width:10%"> <!-- Edit progress % here -->
            <div class="fbox" id="fC" style="width: 85px"> <!-- Edit shaded area here -->
              <span class="ftext">Column 1</span> 
            </div>
          </div>
        </div>
      </td>
			<td>
        <div class="fprogress" >
          <div class="fprogress-bar" id="fC" style="width:50%"> <!-- Edit progress % here -->
            <div class="fbox" id="fC" style="width: 85px"> <!-- Edit shaded area here -->
              <span class="ftext">Column 2</span>
  					</div>
          </div>
        </div>
			</td>
			<td>
				<div class="fprogress" >
  			  <div class="fprogress-bar" id="fC" style="width:100%"> <!-- Edit progress % here -->
     			  <div class="fbox" id="fC" style="width: 85px"> <!-- Edit shaded area here -->
              <span class="ftext">Column 3</span> 
            </div>
          </div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

<h3> Note: </h3>
<p> The notation of columns is included in the progress, so if the progress is "small," the notations itself will be obscured. See the second column in two-column progress bar and first in three-column progress bar examples. </p>

progress-bars-css-html.markdown

Progress bars (CSS & HTML)

A Pen by Franjo Ivankovic on CodePen.

License.

style.css

h3, p {
  font-family: Tahoma;
}

#ftable2 {
  width: 100%;
}

#ftable2 td {
  width: 50%;
}

#ftable3 {
  width: 100%;
}

#ftable3 td {
  width: 30%;
}

.fprogress {
  display: flex;
	height: 40px;
	overflow: hidden; 
	background-color: #EEEEEE;
	border-radius: 3px;
	box-shadow: 3px;
	width: 98%;
}

.fprogress-bar {
  display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	text-align: left;
  white-space: nowrap;
	transition: width 2s;
}

.ftext {
	display: flex;
	font-size: 13pt;
	font-family: Tahoma;
	font-weight: bold;
  vertical-align: middle;
	margin-top: 5px;
}

.fbox {
	display: flex;
	color: #efefef;
	margin-left: 5px;
	padding-left: 5px;
	height: 30px;
	border-radius: 3px;

}

#fA.fprogress-bar {
	background-color: #3188ce;
}

#fA.fbox{
	background-color: #1a4ca0;
}

#fB.fprogress-bar {
	background-color: #ecb31b;
}

#fB.fbox{
	background-color: #df9220;
}

#fC.fprogress-bar {
	background-color: #eb4e20;
}

#fC.fbox{
	background-color: #CC3213;
}