Coloring 50% of the progress bar - html

Question

I have to color 50% of the progress bar with red color. Here is what I have tried , my css and html:
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>
How to color it without adding any text to <span> element in the output?

Answer 1

You have forgot to mention height & position to span tag
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>

Answer 2

If you want to do that without span tag then use pseudo selector ::after as below to style that,
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow:hidden;
}
.progress:after{
content:'';
position:absolute;
background: red;
left: 0%;
top:0;
width: 50%;
height:10px;
box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
z-index:9;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
<div id="id1" class="progress complete">
</div>
Span tag default display is inline so you need to change that to inline-block and height to it.
.progress {
width: 100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow: hidden;
}
.progress.complete {
height: 0.9em;
position: relative;
}
span {
background: red;
left: 0%;
width: 50%;
height: 15px;
display: block;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
<div id="id1" class="progress complete">
<span title="progress bar" rel="tooltip"></span>
</div>