If you want to create progress bars using only css3, you can see here how to make it.

HTML Base
The bar in which the progress will be shown can be taken as a <div> with some class named outer. Inside this outer you can take a span in which the progress area is filled.
 

<div class=outer>
  <span style="width: 25%"></span>
</div>

Start of CSS
The div wrapper is the container of the progress bar. Here we are not setting the width, so that it will take place according to its outer container. You can set height accordingly.
 

.outer {
    height: 20px;  /* Can be anything */
    position: relative;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

The span that is inside the outer div is filled with the area of progress. We will make it a block element with the 100% height, so that it can be stretched to fit into that.
 

.outer > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

You can see the demo here.