# CSS scaled gradient on progress bar

**URL:** <https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 17, 2023, 7:41am UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990 "2023-02-17T07:41:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [February 17, 2023, 7:41am UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/1 "2023-02-17T07:41:50Z")

</div>

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.

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

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/23172728fca85bc42d5916427c2f44630c56e183.png)

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? 🙂

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 17, 2023, 8:47am UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/2 "2023-02-17T08:47:09Z")

</div>

> [@andreas](#):
>
> `linear-gradient(0.25turn, #3f87a600, #ebf8e1, #f69d3c)`

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

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

```

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

![Screenshot 2023-02-17 at 12.46.11 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a883b341c3aca58d750003bbca5990f6fe6feb5e.png)

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [February 17, 2023, 9:09am UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/3 "2023-02-17T09:09:22Z")

</div>

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

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d945c2a8dcb6854699cadd117227697deac209fa.png)

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

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34d7b6571239a56f835b2c9a0947cab393e65f70.png)

vs.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/ffdc78613d0558b74307b8b542d016233196701d.png)

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 17, 2023, 4:16pm UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/4 "2023-02-17T16:16:28Z")

</div>

![Screenshot 2023-02-17 at 8.14.57 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/694278b0fb85387c23a47c5dc4dbcd20d230e248.png)  
 ![Screenshot 2023-02-17 at 8.15.03 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f2c0582a56ab57ffcf069182b591afdce1b8f73.png)  
 ![Screenshot 2023-02-17 at 8.15.08 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/62b566599c52c906d5a8c798fc370eab7e12b7ea.png)

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 17, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/5 "2023-02-17T16:31:41Z")

</div>

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:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/253a841020cd2b0672b138b0d730b32011d8fd89.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af1befd7dd8e35fa15f71734e5a06932b5496b51.png)

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.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 17, 2023, 4:53pm UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/6 "2023-02-17T16:53:32Z")

</div>

> [@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:

```auto
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:

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

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/596df9428d852b1912c81730891f798bb1fd3d0e.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 17, 2023, 4:56pm UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/7 "2023-02-17T16:56:45Z")

</div>

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`.  
 ![Screenshot 2023-02-17 at 8.54.29 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b2d153fd799a519a50e4b67480b76e1f4a76218d.png)  
 ![Screenshot 2023-02-17 at 8.54.35 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/332f28110ef859b0911bd66190516b1ad8dee13b.png)  
 ![Screenshot 2023-02-17 at 8.54.42 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/545d27c3291925c5eb336e1b6c0acf18c35e924d.png)

This is the View utilized within the Embedded View:  
[ProgressBar.zip](https://forum.inductiveautomation.com/uploads/short-url/gtQDdONQS23LlQ7Qs47neEUmdrJ.zip) (1.4 KB)

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [February 17, 2023, 7:06pm UTC](https://forum.inductiveautomation.com/t/css-scaled-gradient-on-progress-bar/69990/8 "2023-02-17T19:06:15Z")

</div>

Exactly what I wanted, works perfectly! Thank you! 🤝🏼 🙂

![progressbars_anim](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e49700d0c0521944d1fd80e43d6b4457874912b.gif)

> [@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.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1c5bd213c7beb6257d1327bd11ae8f5bb780d1a9.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1f88fe00b4b0d18201c69c6962550803cd2b2563.png)

Again, thanks! 🙂