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

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

<div id='jqxWidget'>
  <div id="container" style="font-family: Verdana; font-size: 12px; float: left">
    <b>Default Layout</b>
    <jqxProgressBar [theme]="'material'" #horizontalProgressBar
                    [width]="300"
                    [height]="40"
                    [value]="50">
    </jqxProgressBar><br />
    <jqxProgressBar [theme]="'material'" #verticalProgressBar style="margin-top: 10px;"
                    [width]="40"
                    [height]="300"
                    [orientation]="'vertical'"
                    [value]="50">
    </jqxProgressBar>
    <div style="margin-top: 10px;" id='verticalProgressBar'></div>
  </div>
  <div style="float: right; font-family: Verdana; font-size: 12px;" id="rightContainer">
    <b>Reversed Layout</b>
    <jqxProgressBar [theme]="'material'" #mirrorHorizontalProgressBar
                    [width]="300"
                    [height]="40"
                    [layout]="'reverse'"
                    [value]="50">
    </jqxProgressBar><br />
    <jqxProgressBar [theme]="'material'" #mirrorVerticalProgressBar style="float: right;"
                    [width]="40"
                    [height]="300"
                    [orientation]="'reverse'"
                    [layout]="'vertical'"
                    [value]="50">
    </jqxProgressBar>
  </div>
</div>