jquery - 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%;
}