• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11The progress bars are for situations where the percentage completed can be
12determined. They give users a quick sense of how much longer an operation
13will take.
14
15Example:
16
17    <paper-progress value="10"></paper-progress>
18
19There is also a secondary progress which is useful for displaying intermediate
20progress, such as the buffer level during a streaming playback progress bar.
21
22Example:
23
24    <paper-progress value="10" secondaryProgress="30"></paper-progress>
25
26Styling progress bar:
27
28To change the active progress bar color:
29
30    paper-progress::shadow #activeProgress {
31      background-color: #e91e63;
32    }
33
34To change the secondary progress bar color:
35
36    paper-progress::shadow #secondaryProgress {
37      background-color: #f8bbd0;
38    }
39
40To 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