<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../iron-range-behavior/iron-range-behavior.html”> <link rel=“import” href=“../paper-styles/color.html”>

<!– Material design: [Progress & activity](www.google.com/design/spec/components/progress-activity.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;
}

To change the duration of the indeterminate cycle:

paper-progress {
  --paper-progress-indeterminate-cycle-duration: 2s;
}

The following mixins are available for styling:

Custom property | Description | Default ————————————————-|———————————————|————– `–paper-progress-container` | Mixin applied to container | `{}` `–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-container-color` | Color of the container | `–google-grey-300` `–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` `–paper-progress-indeterminate-cycle-duration` | Duration of an indeterminate cycle | `2s`

@group Paper Elements @element paper-progress @hero hero.svg @demo demo/index.html –>

<dom-module id=“paper-progress”>

<template>
  <style>
    :host {
      display: block;
      width: 200px;
      position: relative;
      overflow: hidden;
    }

    :host([hidden]) {
      display: none !important;
    }

    #progressContainer {
      @apply(--paper-progress-container);
      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: 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: var(--paper-progress-active-color, --google-green-500);
    }

    #secondaryProgress {
      background: var(--paper-progress-secondary-color, --google-green-100);
    }

    :host([disabled]) #primaryProgress {
      background: var(--paper-progress-disabled-active-color, --google-grey-500);
    }

    :host([disabled]) #secondaryProgress {
      background: var(--paper-progress-disabled-secondary-color, --google-grey-300);
    }

    :host(:not([disabled])) #primaryProgress.indeterminate {
      -webkit-transform-origin: right center;
      transform-origin: right center;
      -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
      animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
    }

    :host(:not([disabled])) #primaryProgress.indeterminate::after {
      content: "";
      -webkit-transform-origin: center center;
      transform-origin: center center;

      -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
      animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 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>

  <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>