| Index: third_party/polymer/v1_0/components/paper-progress/paper-progress.html
|
| diff --git a/third_party/polymer/v1_0/components/paper-progress/paper-progress.html b/third_party/polymer/v1_0/components/paper-progress/paper-progress.html
|
| deleted file mode 100644
|
| index 3df2577b3b14cc93f5aa0f3043b27b1316e4cc2c..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/v1_0/components/paper-progress/paper-progress.html
|
| +++ /dev/null
|
| @@ -1,227 +0,0 @@
|
| -<!--
|
| -@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.txt
|
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| -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.txt
|
| --->
|
| -
|
| -<link rel="import" href="../polymer/polymer.html">
|
| -<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;
|
| - }
|
| -
|
| -Add the class `transiting` to a paper-progress to animate the progress bar when
|
| -the value changed. You can also customize the transition:
|
| -
|
| - paper-progress {
|
| - --paper-progress-transition-duration: 0.08s;
|
| - --paper-progress-transition-timing-function: ease;
|
| - --paper-progress-transition-transition-delay: 0s;
|
| - }
|
| -
|
| -@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;
|
| - }
|
| -
|
| - :host(.transiting) #activeProgress,
|
| - :host(.transiting) #secondaryProgress {
|
| - -webkit-transition-property: -webkit-transform;
|
| - transition-property: transform;
|
| -
|
| - /* Duration */
|
| - -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
| - transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
| -
|
| - /* Timing function */
|
| - -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
| - transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
| -
|
| - /* Delay */
|
| - -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
| - transition-delay: var(--paper-progress-transition-delay, 0s);
|
| - }
|
| -
|
| - #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>
|
|
|