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

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

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

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

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

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