Gradient Color for Linear ProgressBar

[Khushboo]

Hi,

I am trying to add gradient color in the Progress Bar, I tried the below solution

progressColor: 'url(#gradient-bar)'

<svg style="height: 0px;">

        <defs>

            <linearGradient id="gradient-bar" x1="0%" y1="0%" x2="100%" y2="0%">

                <stop offset="10%" style="stop-color:#B6F38F;stop-opacity:1" />

                <stop offset="40%" style="stop-color:#26888F;stop-opacity:1" />

            </linearGradient>

        </defs>

    </svg>  

The above solution works for Circular ProgressBar but it doesn't work for Linear ProgressBar.

Please find the attached screenshot for the expected behavior.

Please Suggest the solution to apply Gradient color for Linear ProgressBar in Angular

Thanks & Regards,
Khushboo

Attachment: progressbar_gradient_ef6cf5e9.zip

[Durga Gopalakrishnan]

Hi Khushboo,

We have validated your reported scenario. We have considered this as a bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 2nd February 2021. We appreciate your patience until then. You can keep track of the bug from the feedback portal below. 

  

Feedback Link : https://www.syncfusion.com/feedback/21222/ 

  

The provided feedback link is private, and you need to login to view this feedback. 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

  

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Khushboo, 

  

We are working on reported issue. We will include the fix in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March 2021. We appreciate your patience until then. 

  

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Khushboo,

Thanks for being patience. We have resolved the reported issue in sample level itself using rangeColors and isGradient properties. We have prepared sample and attached for your reference. 

app.component.html
<ejs-progressbar #linear id='linear' [rangeColors]="rangeColors" [isGradient]="isGradient"> </ejs-progressbar>

app.component.ts
export class AppComponent {
public rangeColors: RangeColorModel[] = [

    { start: 0, end: 50, color: "red" },

    { start: 50, end: 100, color: "orange" }

  ];

  public isGradient: boolean = true;
}

Sample : https://stackblitz.com/edit/angular-je1da6-aytmfm

Please revert us if you have any concerns.

Regards,

Durga G