Create Flat Skill Bars with Pure CSS

Preview:

Description:

In this post we’re going to create flat styled progress bars to present your skills & experiences by using pure CSS. Created & released by StoyPenn.

How to use it:

Create the Html for the skill bars. Use CSS class ‘value-*’ to specify the percentage.

<div class="contentContainer">
  <div class="progressBar">
    <h4>HTML5</h4>
    <div class="progressBarContainer">
      <div class="progressBarValue value-90"></div>
    </div>
  </div>
  <div class="progressBar">
    <h4>CSS3</h4>
    <div class="progressBarContainer">
      <div class="progressBarValue value-80"></div>
    </div>
  </div>
  <div class="progressBar">
    <h4>Jquery</h4>
    <div class="progressBarContainer">
      <div class="progressBarValue value-30"></div>
    </div>
  </div>
  <div class="progressBar">
    <h4>WordPress</h4>
    <div class="progressBarContainer">
      <div class="progressBarValue value-70"></div>
    </div>
  </div>
</div>

The CSS to render the skill bars in the DIV elements.

.contentContainer {
  background: #efefef;
  padding: 20px;
  max-width: 350px;
  min-width: 150px;
  margin: 15vh auto;
  border-radius: 10px;
  border: solid 5px #dbdbdb;
}

/*///////////////////////////////////////////////////////
    // Progress Bars \\ 
///////////////////////////////////////////////////////*/

.progressBar {
  margin-bottom: 26px;
  margin-bottom: 1.66em;
}

.progressBar h4 {
  font-size: 21px;
  font-size: 1.33em;
  text-transform: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 7px;
  margin-bottom: .33em;
}

.progressBarContainer {
  width: 100%;
  max-width: 350px;
  height: 26px;
  height: 1.66em;
  background: #e6eae3;
  background: rgba(8,102,220,.2);
  overflow: hidden;
  border-radius: 5px;
}

.progressBarValue {
  height: 1.66em;
  float: left;
  background: #0866dc;
  background: rgba(8,102,220,.75);
}

.value-00 { width: 0; }

.value-10 { width: 10%; }

.value-20 { width: 20%; }

.value-30 { width: 30%; }

.value-40 { width: 40%; }

.value-50 { width: 50%; }

.value-60 { width: 60%; }

.value-70 { width: 70%; }

.value-80 { width: 80%; }

.value-90 { width: 90%; }

.value-100 { width: 100%; }