paper-progress.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" 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
@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>