| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer('paper-progress', { | |
| 4 | |
| 5 /** | |
| 6 * The number that represents the current secondary progress. | |
| 7 * | |
| 8 * @attribute secondaryProgress | |
| 9 * @type number | |
| 10 * @default 0 | |
| 11 */ | |
| 12 secondaryProgress: 0, | |
| 13 | |
| 14 /** | |
| 15 * Use an indeterminate progress indicator. | |
| 16 * | |
| 17 * @attribute indeterminate | |
| 18 * @type boolean | |
| 19 * @default false | |
| 20 */ | |
| 21 indeterminate: false, | |
| 22 | |
| 23 step: 0, | |
| 24 | |
| 25 observe: { | |
| 26 'value secondaryProgress min max indeterminate': 'update' | |
| 27 }, | |
| 28 | |
| 29 update: function() { | |
| 30 this.super(); | |
| 31 this.secondaryProgress = this.clampValue(this.secondaryProgress); | |
| 32 this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100; | |
| 33 | |
| 34 // If we use attribute/class binding, the animation sometimes doesn't tr
anslate properly | |
| 35 // on Safari 7.1. So instead, we toggle the class here in the update met
hod. | |
| 36 this.$.activeProgress.classList.toggle('indeterminate', this.indetermina
te); | |
| 37 }, | |
| 38 | |
| 39 transformProgress: function(progress, ratio) { | |
| 40 var transform = 'scaleX(' + (ratio / 100) + ')'; | |
| 41 progress.style.transform = progress.style.webkitTransform = transform; | |
| 42 }, | |
| 43 | |
| 44 ratioChanged: function() { | |
| 45 this.transformProgress(this.$.activeProgress, this.ratio); | |
| 46 }, | |
| 47 | |
| 48 secondaryRatioChanged: function() { | |
| 49 this.transformProgress(this.$.secondaryProgress, this.secondaryRatio); | |
| 50 } | |
| 51 | |
| 52 }); | |
| 53 | |
| 54 | |
| OLD | NEW |