<!-- @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="../iron-range-behavior/iron-range-behavior.html"> <link rel="import" href="../paper-styles/color.html"> <link rel="import" href="../iron-flex-layout/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; } The following mixins are available for styling: Custom property | Description | Default --------------------------------------------|---------------------------------------------|---------- --paper-progress-container-color | Mixin applied to container | --google-grey-300 --paper-progress-transition-duration | Duration of the transition | 0.008s --paper-progress-transition-timing-function | The timing function for the transition | ease --paper-progress-transition-delay | delay for the transition | 0s --paper-progress-active-color | The color of the active bar | --google-green-500 --paper-progress-secondary-color | The color of the secondary bar | --google-green-100 --paper-progress-disabled-active-color | The color of the active bar if disabled | --google-grey-500 --paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300 --paper-progress-height | The height of the progress bar | 4px @group Paper Elements @element paper-progress @hero hero.svg @demo demo/index.html --> <dom-module id="paper-progress"> <style> :host { display: block; width: 200px; position: relative; overflow: hidden; } #progressContainer { position: relative; } #progressContainer, /* the stripe for the indeterminate animation*/ .indeterminate:after { height: var(--paper-progress-height, 4px); } #primaryProgress, #secondaryProgress, .indeterminate:after { @apply(--layout-fit); } #progressContainer, .indeterminate:after { background-color: var(--paper-progress-container-color, --google-grey-300); } :host(.transiting) #primaryProgress, :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); } #primaryProgress, #secondaryProgress { @apply(--layout-fit); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(0); transform: scaleX(0); will-change: transform; } #primaryProgress { background-color: var(--paper-progress-active-color, --google-green-500); } #secondaryProgress { position: relative; background-color: var(--paper-progress-secondary-color, --google-green-100); } :host([disabled]) #primaryProgress { background-color: var(--paper-progress-disabled-active-color, --google-grey-500); } :host([disabled]) #secondaryProgress { background-color: var(--paper-progress-disabled-active-color, --google-grey-300); } :host(:not([disabled])) #primaryProgress.indeterminate { -webkit-transform-origin: right center; transform-origin: right center; -webkit-animation: indeterminate-bar 2s linear infinite; animation: indeterminate-bar 2s linear infinite; } :host(:not([disabled])) #primaryProgress.indeterminate:after { content: ""; -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: indeterminate-splitter 2s linear infinite; animation: indeterminate-splitter 2s linear infinite; } @-webkit-keyframes indeterminate-bar { 0% { -webkit-transform: scaleX(1) translateX(-100%); } 50% { -webkit-transform: scaleX(1) translateX(0%); } 75% { -webkit-transform: scaleX(1) translateX(0%); -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); } 100% { -webkit-transform: scaleX(0) translateX(0%); } } @-webkit-keyframes indeterminate-splitter { 0% { -webkit-transform: scaleX(.75) translateX(-125%); } 30% { -webkit-transform: scaleX(.75) translateX(-125%); -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); } 90% { -webkit-transform: scaleX(.75) translateX(125%); } 100% { -webkit-transform: scaleX(.75) translateX(125%); } } @keyframes indeterminate-bar { 0% { transform: scaleX(1) translateX(-100%); } 50% { transform: scaleX(1) translateX(0%); } 75% { transform: scaleX(1) translateX(0%); animation-timing-function: cubic-bezier(.28,.62,.37,.91); } 100% { transform: scaleX(0) translateX(0%); } } @keyframes indeterminate-splitter { 0% { transform: scaleX(.75) translateX(-125%); } 30% { transform: scaleX(.75) translateX(-125%); animation-timing-function: cubic-bezier(.42,0,.6,.8); } 90% { transform: scaleX(.75) translateX(125%); } 100% { transform: scaleX(.75) translateX(125%); } } </style> <template> <div id="progressContainer"> <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div> <div id="primaryProgress"></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 }, /** * The secondary ratio */ secondaryRatio: { type: Number, value: 0, readOnly: true }, /** * Use an indeterminate progress indicator. */ indeterminate: { type: Boolean, value: false, observer: '_toggleIndeterminate' }, /** * True if the progress is disabled. */ disabled: { type: Boolean, value: false, reflectToAttribute: true, observer: '_disabledChanged' } }, observers: [ '_progressChanged(secondaryProgress, value, min, max)' ], hostAttributes: { role: 'progressbar' }, _toggleIndeterminate: function(indeterminate) { // 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', indeterminate, this.$.primaryProgress); }, _transformProgress: function(progress, ratio) { var transform = 'scaleX(' + (ratio / 100) + ')'; progress.style.transform = progress.style.webkitTransform = transform; }, _mainRatioChanged: function(ratio) { this._transformProgress(this.$.primaryProgress, ratio); }, _progressChanged: function(secondaryProgress, value, min, max) { secondaryProgress = this._clampValue(secondaryProgress); value = this._clampValue(value); var secondaryRatio = this._calcRatio(secondaryProgress) * 100; var mainRatio = this._calcRatio(value) * 100; this._setSecondaryRatio(secondaryRatio); this._transformProgress(this.$.secondaryProgress, secondaryRatio); this._transformProgress(this.$.primaryProgress, mainRatio); this.secondaryProgress = secondaryProgress; this.setAttribute('aria-valuenow', value); this.setAttribute('aria-valuemin', min); this.setAttribute('aria-valuemax', max); }, _disabledChanged: function(disabled) { this.setAttribute('aria-disabled', disabled ? 'true' : 'false'); }, _hideSecondaryProgress: function(secondaryRatio) { return secondaryRatio === 0; } }); </script>