Home | History | Annotate | Download | only in paper-progress 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      8 -->
      9 
     10 <!--
     11 The progress bars are for situations where the percentage completed can be 
     12 determined. They give users a quick sense of how much longer an operation 
     13 will take.
     14 
     15 Example:
     16 
     17     <paper-progress value="10"></paper-progress>
     18     
     19 There is also a secondary progress which is useful for displaying intermediate 
     20 progress, such as the buffer level during a streaming playback progress bar.
     21 
     22 Example:
     23 
     24     <paper-progress value="10" secondaryProgress="30"></paper-progress>
     25 
     26 Styling progress bar:
     27 
     28 To change the active progress bar color:
     29 
     30     paper-progress::shadow #activeProgress {
     31       background-color: #e91e63;
     32     }
     33 
     34 To change the secondary progress bar color:
     35 
     36     paper-progress::shadow #secondaryProgress {
     37       background-color: #f8bbd0;
     38     }
     39     
     40 To change the progress bar background color:
     41 
     42     paper-progress::shadow #progressContainer {
     43       background-color: #64ffda;
     44     }
     45 
     46 @group Paper Elements
     47 @element paper-progress
     48 @extends core-range
     49 @homepage github.io
     50 -->
     51 
     52 <link rel="import" href="../core-range/core-range.html">
     53 
     54 <polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate">
     55 
     56   <template>
     57   
     58     <link rel="stylesheet" href="paper-progress.css">
     59   
     60     <div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}">
     61     
     62       <div id="secondaryProgress" fit></div>
     63       <div id="activeProgress" fit></div>
     64       
     65     </div>
     66     
     67   </template>
     68   
     69   <script>
     70   
     71     Polymer('paper-progress', {
     72       
     73       /**
     74        * The number that represents the current secondary progress.
     75        *
     76        * @attribute secondaryProgress
     77        * @type number
     78        * @default 0
     79        */
     80       secondaryProgress: 0,
     81       
     82       /**
     83        * Use an indeterminate progress indicator.
     84        *
     85        * @attribute indeterminate
     86        * @type boolean
     87        * @default false
     88        */
     89       indeterminate: false,
     90 
     91       step: 0,
     92       
     93       observe: {
     94         'value secondaryProgress min max indeterminate': 'update'
     95       },
     96       
     97       update: function() {
     98         this.super();
     99         this.secondaryProgress = this.clampValue(this.secondaryProgress);
    100         this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100;
    101 
    102         // If we use attribute/class binding, the animation sometimes doesn't translate properly
    103         // on Safari 7.1. So instead, we toggle the class here in the update method.
    104         this.$.activeProgress.classList.toggle('indeterminate', this.indeterminate);
    105       },
    106 
    107       transformProgress: function(progress, ratio) {
    108         var transform = 'scaleX(' + (ratio / 100) + ')';
    109         progress.style.transform = progress.style.webkitTransform = transform;
    110       },
    111 
    112       ratioChanged: function() {
    113         this.transformProgress(this.$.activeProgress, this.ratio);
    114       },
    115 
    116       secondaryRatioChanged: function() {
    117         this.transformProgress(this.$.secondaryProgress, this.secondaryRatio);
    118       }
    119       
    120     });
    121     
    122   </script>
    123   
    124 </polymer-element>
    125