Create a pure css3 progress bar

Question

Any idea on how to create something like this with pure css3?

Answer 1

CSS

You can do this with css alone.
Just using <div> tags and setting color and position to create the shape.

---

.container {
  background-color: #ddd;
  border-radius: 15px;
  width: 200px;
  height: 75px;
  position: relative;
}
.container div {
  position: relative;
  display: inline-block;
  top: 25%;
  width: 7%;
  height: 40%;
  margin: 2%;
  background-color: black;
}
.container div:nth-of-type(1) {
  margin-left: 7%;
  background-color: red;
}
.container div:nth-of-type(2) {
  background-color: firebrick;
}
.container div:nth-of-type(3) {
  background-color: Orange;
}
.container div:nth-of-type(4) {
  background-color: yellow;
}
.container div:nth-of-type(5) {
  background-color: LightGreen;
}
.container div:nth-of-type(6) {
  background-color: ForestGreen;
}
.container div:nth-of-type(7) {
  background-color: green;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

How about something like this ?

.container{
    width:500px;
    height:100px;
    overflow:hidden;
}
.secondary{
    width:500px;
    height:100px;
    transform:rotate(-5deg);
    transform-origin:100% 100%;
    overflow:hidden;
}
.prgbr{
    width:50px;
    height:100px;
    transform:rotate(5deg);
    display:inline-block;
    margin-top:-5px;
}
.prgbr:nth-child(1){
  background:red;
  }
.prgbr:nth-child(2){
  background:red;
  }
.prgbr:nth-child(3){
  background:orange;
  }
.prgbr:nth-child(4){
  background:orange;
  }
.prgbr:nth-child(5){
  background:yellow;
  }
.prgbr:nth-child(6){
  background:lightgreen;
  }
.prgbr:nth-child(7){
  background:green;
  }

<div class="container">
    <div class="secondary">
        <div class="prgbr"></div>
        <div class="prgbr"></div>
        <div class="prgbr"></div>
        <div class="prgbr"></div>
        <div class="prgbr"></div>
        <div class="prgbr"></div>
        <div class="prgbr"></div>
    </div>
</div>

Answer 3

Whilst this may need a little bit of tinkering, you may be able to use something like:

$('#add').click(function() {
  var x = parseInt($('.ran').val()) + 1;
  $('.ran').attr('value', x);
});
$('#min').click(function() {
  var x = parseInt($('.ran').val()) - 1;
  $('.ran').attr('value', x);
});

html,body{margin:0;padding:0;background:#222; text-align:center;}
.onetoTen {
  height: 100px;
  width: 300px;
  overflow: hidden;
  position: relative;
  background:lightgray;
  padding:10px;
  padding-bottom:0;
  border-radius:10px;
  border:5px solid dimgray;
  margin: 20px auto;
}
.onetoTen div {
  display: inline-block;  
  width: 9%;
  height: 100%;
  transform: skewY(-20deg);
  transform-origin: bottom right;
  vertical-align: bottom;
  position: absolute;
  bottom: 0;
}
.ran {
  display: none;
}
.ran[value="0"] + .onetoTen div {
  display: none;
}
.ran[value="1"] + .onetoTen div:nth-child(1) ~ div {
  display: none;
}
.ran[value="2"] + .onetoTen div:nth-child(2) ~ div {
  display: none;
}
.ran[value="3"] + .onetoTen div:nth-child(3) ~ div {
  display: none;
}
.ran[value="4"] + .onetoTen div:nth-child(4) ~ div {
  display: none;
}
.ran[value="5"] + .onetoTen div:nth-child(5) ~ div {
  display: none;
}
.ran[value="6"] + .onetoTen div:nth-child(6) ~ div {
  display: none;
}
.ran[value="7"] + .onetoTen div:nth-child(7) ~ div {
  display: none;
}
.ran[value="8"] + .onetoTen div:nth-child(8) ~ div {
  display: none;
}
.ran[value="9"] + .onetoTen div:nth-child(9) ~ div {
  display: none;
}
.ran[value="10"] + .onetoTen div:nth-child(10) ~ div {
  display: none;
}
.onetoTen div:nth-child(1) {
  left: 0;
  height: 10%;
  background: rgb(255, 0, 0)
}
.onetoTen div:nth-child(2) {
  left: 10%;
  height: 20%;
  background: rgb(235, 0, 25)
}
.onetoTen div:nth-child(3) {
  left: 20%;
  height: 30%;
  background: rgb(215, 0, 45)
}
.onetoTen div:nth-child(4) {
  left: 30%;
  height: 40%;
  background: rgb(195, 0, 65)
}
.onetoTen div:nth-child(5) {
  left: 40%;
  height: 50%;
  background: rgb(175, 0, 85)
}
.onetoTen div:nth-child(6) {
  left: 50%;
  height: 60%;
  background: rgb(155, 0, 115)
}
.onetoTen div:nth-child(7) {
  left: 60%;
  height: 70%;
  background: rgb(125, 0, 135)
}
.onetoTen div:nth-child(8) {
  left: 70%;
  height: 80%;
  background: rgb(105, 0, 155)
}
.onetoTen div:nth-child(9) {
  left: 80%;
  height: 90%;
  background: rgb(85, 0, 175)
}
.onetoTen div:nth-child(10) {
  left: 90%;
  height: 100%;
  background: rgb(0, 0, 255)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="ran" value="1" type="progress" min="0" max="10" />
<div class="onetoTen">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<button id="add">Add</button>
<button id="min">minus</button>

Please note the JQuery included in my answer I'm sure can be improved, and so is only included for demo purposes (as it would require validation rules to be included)