jqwidgets-framework/demos/Angular/src/progressbar/colorranges/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div style="margin-top: 10px">Horizontal</div>

<jqxProgressBar #myProgressBar
    [width]="250" [height]="30" [value]="0" [showText]="true" [orientation]="'horizontal'"
    [renderText]="renderText" [colorRanges]="horizontalColorRanges">
</jqxProgressBar>

<div style="margin-top: 10px">Vertical</div>

<jqxProgressBar #myVerticalProgressBar
    [width]="30" [height]="250" [value]="0" [showText]="true" [orientation]="'vertical'"
    [renderText]="renderText" [colorRanges]="verticalColorRanges">
</jqxProgressBar>