How to make a flexible design for a progress bar

Question

I have a progress bar generated by the code listed bellow. I am looking to use the progress bar multiple times on my website and I want to be able to show a different progress % each time I declare a bar. Therefore, I would like to know the best approach to allow me to change to { width: x% } in my CSS file to the desired progress % when I declare my bar in HTML.

jsfiddle for a 40% progress example: http://jsfiddle.net/gbmrsoj2/

<div id="progressbar">
    <div id="progress">
    </div>
</div>

body {
    padding: 40px;
}

#progressbar {
    width: 100%;
    height: 20px;
    background-color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 3px;
    border: 3px solid #666666;
    clear: both;
}

#progress {
    background: green;
    height: 20px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

@-webkit-keyframes progress { 
    from { }
    to { width: 40% }
}

@-moz-keyframes progress { 
    from { }
    to { width: 40% }
}

@-ms-keyframes progress { 
    from { }
    to { width: 40% }
}

@keyframes progress { 
    from { }
    to { width: 40% }
}

Answer 1

Using CLASS and inner element (for width)

body {padding: 40px;}

.progress-bar{
  box-sizing:padding-box;
  border-radius: 25px;
  display:inline-block;
  width:100%;
  height: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #666;
}
.progress-bar > span{
  display:inline-block;
  border-radius: 25px;
  height:20px;
  background:green;
}

<span class="progress-bar">
  <span style="width:40%"></span>
</span>

Using backround-size

body {padding: 40px;}

.progress-bar{
  box-sizing:padding-box;
  border-radius: 25px;
  display:inline-block;
  width:100%;
  height: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #666;
  background: no-repeat url(//placehold.it/200x200/080) 0 0;
}

<span class="progress-bar" style="background-size:40%"></span>

Styling type=range input element

I've created a HTML5 example using the <input> element with range attribute:

body {padding: 40px;}

input[type=range]{
  -webkit-appearance: none;
  width:100%;
  background: transparent;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  height: 26px;
  border: 3px solid transparent;
  box-shadow: 0 0 0 3px #666;
}
input[type=range]:focus{ outline: none;}
input[type=range]::-webkit-slider-runnable-track {
  height:26px;
}
input[type=range]::-webkit-slider-thumb{
  position:relative;
  -webkit-appearance: none;
  border-radius: 25px;
  height:100%;
  width:0;
  background: red;
}
input[type=range]::-webkit-slider-thumb:after{
  position:absolute;
  background: green;
  border-radius: 25px;
  height:20px;
  right:0;
  top:3px;
  width:1000px;
  content: "hello"
}

<input type=range value=30>

Answer 2

I found this library was actually really nice to work with.

http://ricostacruz.com/nprogress/

But if you want to do it yourself and animate it,

body {
	padding: 40px;
}

#progressbar {
	width: 100%;
	height: 20px;
	background-color: white;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 3px;
	border: 3px solid #666666;
	clear: both;
}

#progress {
	background: green;
	height: 20px;
	width: 0%;
	max-width: 100%;
	float: left;
	-webkit-animation: progress 2s 1 forwards;
	-moz-animation: progress 2s 1 forwards;
	-ms-animation: progress 2s 1 forwards;
	animation: progress 2s 1 forwards;

	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;

    -webkit-transition: all 1s ease-out;

}

#progress.progress-40{
    width:40%;
}

<script>
function progress(id, percent){
        setTimeout(function(){
         var element = document.getElementById(id);
         if(element){
            element.style.width = percent + '%';
          }
        },1);
}
        
    </script>

<div id="progressbar">
	<div id="progress"></div>
    <script>
        progress('progress',40);
    </script>
</div>