fill background color only 50% of it total width

Is it possible in CSS to fill background color only 50% of its total width?

I am trying make a progress bar where I need to fill background color based on the “%” of progress.

Please provide pointers


solution

There are multiple different ways to achieve this.

Pseudo element approach:

<div class="progress"></div>

EXAMPLE HERE

.progress {   width:200px;   height:50px;   border:1px solid black;   position:relative;
}
.progress:after {   content:'\A';   position:absolute;   background:black;   top:0; bottom:0;   left:0;    width:50%; /* Specify the width.. */
}

Linear-gradients approach:

The advantage to this approach is that you can specify multiple different colors..

EXAMPLE HERE

.progress {   width:200px;   height:50px;   border:1px solid black;   background: -webkit-linear-gradient(left, black 50%, white 50%);   background: -moz-linear-gradient(left, black 50%, white 50%);   background: -ms-linear-gradient(left, black 50%, white 50%);   background: linear-gradient(left, black 50%, white 50%);
}

Animation without JS/JQUERY

Either of these approaches can be animated with pure CSS..

EXAMPLE HERE

.progress:after {   /* other styling .. */   width:50%; /* End width.. */   -webkit-animation: filler 2s ease-in-out;   -moz-animation: filler 2s ease-in-out;   animation: filler 2s ease-in-out;
}


@-webkit-keyframes filler {   0% {
  width:0;   }
}

Transition approach

EXAMPLE HERE

.progress:after {   /* other styling.. */   width:0;   transition:all 2s;   -webkit-transition:all 2s;
}
.progress:hover:after {   width:50%;
}