125 lines
3.4 KiB
HTML
125 lines
3.4 KiB
HTML
<!--
|
|
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" secondaryProgesss="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>
|