CSS: how to compare the value of a custom property and apply styles based on the value?

Question

I am attempting to build a status bar in CSS. The bar shows a percentage completed/remaining, and has tall end bars like this: |=========----------------| . It uses two colors and a gradient to show percentage completed.

I have defined the current percentage as a CSS custom property: --percent . Changing this property via javascript changes the gradient fill, thus updating the bar's display.

The tall end bars are colored based on the starting and ending colors of the status bar.

When --percent reaches 100%, I want to change the ending bar to the correct fill color. Is there a way in CSS that I can compare the --percent value to "100%" and apply a different style to the end bar in order to change its color?

As you can see in the example below, the right-hand bar does not change colors when --percent reaches 100%. I'm trying to avoid javascript to fix this, as I would prefer a CSS solution if possible.

 // Animate the status bar. var percent = 0; setInterval(function() { $('.line').css('--percent', `${percent}%`); percent += 0.1; if (percent > 100) { percent = 0; } }, 10);

 .line { /* Customize the line with these custom properties: */ --line-thickness: 7px; --bar-height: calc(var(--line-thickness) * 4); /* --bar-height: 40px; */ --start-color: purple; --end-color: green; --percent: 0%; display: flex; justify-content: space-between; width: 50%; height: var(--line-thickness); background-color: var(--start-color); margin-top: var(--bar-height); margin-bottom: var(--bar-height); margin-left: var(--line-thickness); margin-right: var(--line-thickness); background: linear-gradient(90deg, var(--start-color) 0%, var(--start-color) var(--percent), var(--end-color) var(--percent)); }.line.left, .line.right { width: var(--line-thickness); height: var(--bar-height); margin-top: calc((var(--bar-height) - var(--line-thickness)) / -2); /* border: 1px solid white; */ }.line.left { background-color: var(--start-color); margin-left: calc(var(--line-thickness) * -1); }.line.right { background-color: var(--end-color); margin-right: calc(var(--line-thickness) * -1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line"> <div class="left"></div> <div class="right"></div> </div>

Answer 1

I would build the shape using mask and the task will be easy. I also replaced the jQuery animation with a CSS animation for the sake of the demo but you can keep it and adjust the background-size to control the progress

 .line { --line: 7px; --bar-height: calc(var(--line) * 4); --start-color: purple; --end-color: green; width: 50%; height: var(--bar-height); -webkit-mask: conic-gradient(at left var(--line) bottom var(--line),#0000 25%,#000 0) 0 0/calc(100% - var(--line)) calc(100% - var(--bar-height)/2 + var(--line)/2); background: linear-gradient(var(--start-color) 0 0) 0 0/0% 100% no-repeat var(--end-color); animation: fill 5s linear infinite; } @keyframes fill { to {background-size:100% 100%} }

 <div class="line"></div>