stylus - Create a pure css3 progress bar -

any idea on how create pure css3?

http://f.cl.ly/items/2r3s1t2j1h450w43263r/captura%20de%20pantalla%202015-06-19%20a%20las%2010.19.17%20copia.png

css

you can css alone.
using <div> tags , setting color , position create 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>