cssprogresslinear-gradients

2 color linear gradient progress bar only halfway complete

I am having trouble trying to get a 2 color linear gradient to stop partway, without ending with the second color.

So the idea is to use a linear gradient to show how much bandwidth has been consumed. I have a starting color, and a color 100% should represent. But when I show only 50% with the linear gradient, the 50% mark is the second color. It should only be about halfway between the 2 colors, the same color it would be at 50% if the usage was at 100%.

I use this code:

background: linear-gradient(-90deg, #438600, #8fd747);

But a 25% and a 75% (for example) would both have #8fd747 at their respective ends. I need them to end at the color 25% and 75% (respectively) between the two colors in my linear gradient.

I can't imagine it's that hard, but I just can't figure it out.

EDIT: Here is what I am looking for with images:

As you can see above, the bars represent the full gradient even when not full. But in those that are less than 100%, I want the gradient to show the level that would be the gradient for it's specific percentage, as seen in the 100%. I shouldn't get the full darker color until it actually hits 100%.

Solution

  • You need to adjust the background-size and use multiple background in order to obtain this. The top layer will be a single color gradient that will cover the main gradient and show only the needed part of it:

    .progress { 
  height: 30px;
  margin: 20px;
  background-image:
    linear-gradient(#ccc, #ccc),
    linear-gradient(to left, #438600, #8fd747);
  background-size: var(--p, 50%) 100%, 100% 100%;
  background-position: right,left;
  background-repeat: no-repeat;
}
    <div class="progress"></div>
<div class="progress" style="--p:70%"></div>
<div class="progress" style="--p:30%"></div>

    Or you can do it with one gradient and adjust background-position:

    .progress { 
  height: 30px;
  margin: 20px;
  background-image:
    linear-gradient(to left, #438600, #8fd747);
  background-size: 100% 100%;
  background-position: var(--p, -200px) 0;
  width: 400px;
  background-repeat: no-repeat;
  background-color: #ccc;
}
    <div class="progress"></div>
<div class="progress" style="--p:-50px;"></div>
<div class="progress" style="--p:-300px;"></div>