fill background color only 50% of it total width

Question

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.

Answer 1

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: linear-gradient(to right, 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%; }