Upgrade to 1.0 and switch clients to dom-repeat where needed.

third_party/polymer/v0_8/components/paper-progress/paper-progress.html

+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+
+<link rel="import" href="../paper-styles/paper-styles.html">
+<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+
+<!--
+The progress bars are for situations where the percentage completed can be
+determined. They give users a quick sense of how much longer an operation
+will take.
+
+Example:
+
+    <paper-progress value="10"></paper-progress>
+
+There is also a secondary progress which is useful for displaying intermediate
+progress, such as the buffer level during a streaming playback progress bar.
+
+Example:
+
+    <paper-progress value="10" secondary-progress="30"></paper-progress>
+
+Styling progress bar:
+
+To change the active progress bar color:
+
+    paper-progress {
+       --paper-progress-active-color: #e91e63;
+    }
+
+To change the secondary progress bar color:
+
+    paper-progress {
+      --paper-progress-secondary-color: #f8bbd0;
+    }
+
+To change the progress bar background color:
+
+    paper-progress {
+      --paper-progress-container-color: #64ffda;
+    }
+
+@group Paper Elements
+@element paper-progress
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-progress">
+  <style>
+    :host {
+      display: inline-block;
+      width: 200px;
+      height: 4px;
+    }
+
+    #progressContainer {
+      position: relative;
+      height: 100%;
+      background-color: var(--paper-progress-container-color, --google-grey-300);
+      overflow: hidden;
+    }
+
+    #activeProgress,
+    #secondaryProgress {
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+    }
+
+    #activeProgress {
+      background-color: var(--paper-progress-active-color, --google-green-500);
+    }
+
+    #secondaryProgress {
+      background-color: var(--paper-progress-secondary-color, --google-green-100);
+    }
+
+    #activeProgress.indeterminate {
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      -webkit-animation: indeterminate-bar 1s linear infinite;
+      animation: indeterminate-bar 1s linear infinite;
+    }
+
+    @-webkit-keyframes indeterminate-bar {
+      0% {
+        -webkit-transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        -webkit-transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        -webkit-transform: translate(50%) scaleX(0);
+      }
+    }
+
+    @keyframes indeterminate-bar {
+      0% {
+        transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        transform: translate(50%) scaleX(0);
+      }
+    }
+  </style>
+  <template>
+    <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
+      <div id="secondaryProgress" class="fit"></div>
+      <div id="activeProgress" class="fit"></div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+
+    is: 'paper-progress',
+
+    behaviors: [
+      Polymer.IronRangeBehavior
+    ],
+
+    properties: {
+
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true
+      },
+
+      /**
+       * The secondary ratio
+       */
+      secondaryRatio: {
+        type: Number,
+        value: 0,
+        readOnly: true,
+        observer: '_secondaryRatioChanged'
+      },
+
+      /**
+       * Use an indeterminate progress indicator.
+       */
+      indeterminate: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_toggleIndeterminate'
+      }
+    },
+
+    observers: [
+      '_ratioChanged(ratio)',
+      '_secondaryProgressChanged(secondaryProgress, min, max)'
+    ],
+
+    _toggleIndeterminate: function() {
+      // If we use attribute/class binding, the animation sometimes doesn't translate properly
+      // on Safari 7.1. So instead, we toggle the class here in the update method.
+      this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
+    },
+
+    _transformProgress: function(progress, ratio) {
+      var transform = 'scaleX(' + (ratio / 100) + ')';
+      progress.style.transform = progress.style.webkitTransform = transform;
+    },
+
+    _ratioChanged: function(ratio) {
+      this._transformProgress(this.$.activeProgress, ratio);
+    },
+
+    _secondaryRatioChanged: function(secondaryRatio) {
+      this._transformProgress(this.$.secondaryProgress, secondaryRatio);
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+      this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
+    }
+
+  });
+
+</script>