CSS scaled gradient on progress bar

[andreas]

Hi all,

Anyone knows how to create a scaled gradient on the perspective progress bar?
In the below figure, a simple linear gradient is applied to the bar on the two progress bars.

background: linear-gradient(0.25turn, #3f87a600, #ebf8e1, #f69d3c)

As you can see, the upper progress bar is orange in the middle of the full range. As expected with the provided linear gradient.

But in this case, we want to have the upper progress bar to be black at the start, white at the end (like the lower progress bar is in the middle), and not showing any orange color. Basically just following the color of the lower progress bar until the middle.

Somebody knows how to implement this?

[cmallonee]

@andreas

linear-gradient(0.25turn, #3f87a600, #ebf8e1, #f69d3c)

Change the first value to black (#000000) and the final value to white (#ffffff).

linear-gradient(0.25turn, #000000, #ebf8e1, #FFFFFF)

Note that the off-white, slightly green middle is driven by the center color value.

[andreas]

Can you place a similar progress bar on top of that one, with half the value? 50% vs 100%? Like the below figure?

I'm trying to have a similar effect like this:

vs.

In the upper chart, the gradient scales wrt the value sort of. In the lower chart, all the bars got the same color on the end even if they represent different values (like I have now).

[cmallonee]

[amarks]

I think you're basically wanting the gradient to be in a constant position, rather than changing as the progress bar fills, and then progress would progress along the gradient.

I think it has to do with how the progress bar is made. To me, it looks like there are 2 "bars." The background bar is static, and the bar representing progress slides to the right, with the section of the bar hidden to the left. Something like:

So, the gradient is moving with the progress bar. I don't think you'll be able to get the exact same gradient effect you're looking for. Unless you dynamically change your gradient as a function of the progress value.

[amarks]

@amarks

dynamically change your gradient

This is how I accomplished that:

Add 3 custom properties for your start points, and use expression bindings with the progress bar value:

whiteStart = 100-{this.props.value}
greenStart = 150-{this.props.value}
orangeStart = 200-{this.props.value}

Then, bind the background property of the bar style like so:

"linear-gradient(0.25turn, #3f87a600 "+{this.custom.whiteStart}+"%, #ebf8e1 "+{this.custom.greenStart}+"%, #f69d3c "+{this.custom.orangeStart}+"%)"

[cmallonee]

At least, not with the standard progress bar. If you don't need all of the bells and whistles, you can very easily make your own progress bar which behaves exactly as you'd like. I've hard-coded the background style we were using, but you could easily pass it in as a param value or parameterize the values it uses very easily by adding param values to the View.

In these screenshots, what you're actually seeing is an Embedded View which takes 3 params: max, value, and borderRadius.

This is the View utilized within the Embedded View:
ProgressBar.zip (1.4 KB)

[andreas]

Exactly what I wanted, works perfectly! Thank you!

@amarks

I think it has to do with how the progress bar is made. To me, it looks like there are 2 "bars." The background bar is static, and the bar representing progress slides to the right, with the section of the bar hidden to the left.

And yes, like you are saying, seems like the bar itself actually is translated in the X direction by the percentage.

Again, thanks!