angular-material-npfixed/src/components/progressCircular/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl as vm" layout="column" ng-cloak>

  <md-content layout-padding>
    <h4>Determinate</h4>

    <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
      give users a quick sense of how long an operation will take.</p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="determinate" value="{{vm.determinateValue}}"></md-progress-circular>
    </div>

    <h4>Indeterminate</h4>

    <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
      expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>

    <h4>Theming</h4>

    <p>
      Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or `md-accent`
      colors.
    </p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular ng-disabled="!vm.activated" class="md-hue-2" md-diameter="20px"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-accent" md-diameter="40"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" md-diameter="96"></md-progress-circular>
    </div>
  </md-content>

  <md-content md-theme="docs-dark" layout-padding>
    <h4>Dark theme</h4>

    <p>
      This is an example of the <b>&lt;md-progress-circular&gt;</b> component, with a dark theme.
    </p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular ng-disabled="!vm.activated" class="md-hue-2" md-diameter="20px"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-accent" md-diameter="40"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-accent md-hue-1" md-diameter="60"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" class="md-warn md-hue-3" md-diameter="70"></md-progress-circular>
      <md-progress-circular ng-disabled="!vm.activated" md-diameter="96"></md-progress-circular>
    </div>
  </md-content>

  <md-content layout="row" layout-align="start center" layout-padding>
    <p>Progress Circular Indicators: </p>

    <h5>Off</h5>
    <md-switch
        ng-model="vm.activated"
        aria-label="Toggle Progress Circular Indicators">
      <h5>On</h5>
    </md-switch>
  </md-content>

</div>