This repository has been archived by the owner. It is now read-only.
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
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
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.
<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.
<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
<link rel="import" href="../core-range/core-range.html">
<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate">
<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>
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.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) + ')'; = = transform;
ratioChanged: function() {
this.transformProgress(this.$.activeProgress, this.ratio);
secondaryRatioChanged: function() {
this.transformProgress(this.$.secondaryProgress, this.secondaryRatio);