WebCompDev / COMPONENTS

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