jqwidgets-scripts-custom/demos/Angular/progressbar/templates/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' style="font-size: 13px; font-family: Verdana; float: left;">
  <div style='margin-top: 10px;'>Primary</div>
  <jqxProgressBar [theme]="'material'" #jqxProgressBar2
                  [animationDuration]="0"
                  [width]="250"
                  [height]="30"
                  [value]="0"
                  [showText]="true"
                  [renderText]="renderText"
                  [template]="'primary'">
  </jqxProgressBar>
  <div style='margin-top: 10px;'>Success</div>
  <jqxProgressBar [theme]="'material'" #jqxProgressBar3
                  [animationDuration]="0"
                  [width]="250"
                  [height]="30"
                  [value]="0"
                  [showText]="true"
                  [renderText]="renderText"
                  [template]="'success'">
  </jqxProgressBar>
  <div style='margin-top: 10px;'>Info</div>
  <jqxProgressBar [theme]="'material'" #jqxProgressBar4
                  [animationDuration]="0"
                  [width]="250"
                  [height]="30"
                  [value]="0"
                  [showText]="true"
                  [renderText]="renderText"
                  [template]="'info'">
  </jqxProgressBar>
  <div style='margin-top: 10px;'>Warning</div>
  <jqxProgressBar [theme]="'material'" #jqxProgressBar5
                  [animationDuration]="0"
                  [width]="250"
                  [height]="30"
                  [value]="0"
                  [showText]="true"
                  [renderText]="renderText"
                  [template]="'warning'">
  </jqxProgressBar>
  <div style='margin-top: 10px;'>Danger</div>
  <jqxProgressBar [theme]="'material'" #jqxProgressBar6
                  [animationDuration]="0"
                  [width]="250"
                  [height]="30"
                  [value]="0"
                  [showText]="true"
                  [renderText]="renderText"
                  [template]="'danger'">
  </jqxProgressBar>
</div>