Rename polymer and cr_elements v0_8 to v1_0

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>