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.
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.
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)