This repository has been archived by the owner. It is now read-only.
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (88 sloc) 3.45 KB
<!--
Copyright (c) 2014 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
-->
<!--
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" secondaryProgress="30"></paper-progress>
Styling progress bar:
To change the active progress bar color:
paper-progress::shadow #activeProgress {
background-color: #e91e63;
}
To change the secondary progress bar color:
paper-progress::shadow #secondaryProgress {
background-color: #f8bbd0;
}
To change the progress bar background color:
paper-progress::shadow #progressContainer {
background-color: #64ffda;
}
@group Paper Elements
@element paper-progress
@extends core-range
@homepage github.io
-->
<link rel="import" href="../core-range/core-range.html">
<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate">
<template>
<link rel="stylesheet" href="paper-progress.css">
<div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}">
<div id="secondaryProgress" fit></div>
<div id="activeProgress" fit></div>
</div>
</template>
<script>
Polymer('paper-progress', {
/**
* The number that represents the current secondary progress.
*
* @attribute secondaryProgress
* @type number
* @default 0
*/
secondaryProgress: 0,
/**
* Use an indeterminate progress indicator.
*
* @attribute indeterminate
* @type boolean
* @default false
*/
indeterminate: false,
step: 0,
observe: {
'value secondaryProgress min max indeterminate': 'update'
},
update: function() {
this.super();
this.secondaryProgress = this.clampValue(this.secondaryProgress);
this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100;
// 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.$.activeProgress.classList.toggle('indeterminate', this.indeterminate);
},
transformProgress: function(progress, ratio) {
var transform = 'scaleX(' + (ratio / 100) + ')';
progress.style.transform = progress.style.webkitTransform = transform;
},
ratioChanged: function() {
this.transformProgress(this.$.activeProgress, this.ratio);
},
secondaryRatioChanged: function() {
this.transformProgress(this.$.secondaryProgress, this.secondaryRatio);
}
});
</script>
</polymer-element>