How can I make this progress bar with just CSS?


Can I make the progress bar below by using CSS only, that is, without using any images? In the second case, one can round the green corners on the left side of the div and not round them on the right side. However, is there a solution for the first and third case without resorting to an external image?

Note, that there should be a smooth transition from the bar being completely empty to being completely green.

Problem courtesy of: Michael


Css Tricks has a good article showing how you would achieve this.


Re: Comment
 Looks pretty close to me
 Notice I have changed the widths of the span elements.

enter image description here

 OP wanted it to look more like his example

Change the following two lines of CSS in the demo

.meter {
background: none repeat scroll 0 0 #555555;
border-radius: 25px 25px 25px 25px;
box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) inset;
height: 40px;
margin: 60px 0 20px;
overflow: hidden; /* remove padding and add me */
position: relative;
.meter > span {
background-color: #2BC253;
background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
border-radius: 20px 0px 0px 20px; /* change me */
box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
display: block;
height: 100%;
overflow: hidden;
position: relative;
enter image description here

Solution courtesy of: rlemon

View additional discussion.