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" secondaryProgesss="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">
     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" style="width: {{secondaryRatio}}%;"></div>
     63       <div id="activeProgress" style="width: {{ratio}}%;"></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       step: 0,
     83       
     84       observe: {
     85         'value secondaryProgress min max': 'update'
     86       },
     87       
     88       update: function() {
     89         this.super();
     90         this.secondaryProgress = this.clampValue(this.secondaryProgress);
     91         this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100;
     92       }
     93       
     94     });
     95     
     96   </script>
     97   
     98 </polymer-element>
     99