OLD | NEW |
(Empty) | |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 Polymer('viewer-progress-bar', { |
| 6 progress: 0, |
| 7 text: 'Loading', |
| 8 numSegments: 8, |
| 9 segments: [], |
| 10 ready: function() { |
| 11 this.numSegmentsChanged(); |
| 12 }, |
| 13 progressChanged: function() { |
| 14 var numVisible = this.progress * this.segments.length / 100.0; |
| 15 for (var i = 0; i < this.segments.length; i++) { |
| 16 this.segments[i].style.visibility = |
| 17 i < numVisible ? 'visible' : 'hidden'; |
| 18 } |
| 19 |
| 20 if (this.progress >= 100 || this.progress < 0) |
| 21 this.style.opacity = 0; |
| 22 }, |
| 23 numSegmentsChanged: function() { |
| 24 // Clear the existing segments. |
| 25 this.segments = []; |
| 26 var segmentsElement = this.$.segments; |
| 27 segmentsElement.innerHTML = ''; |
| 28 |
| 29 // Create the new segments. |
| 30 var segment = document.createElement('li'); |
| 31 segment.classList.add('segment'); |
| 32 var angle = 360 / this.numSegments; |
| 33 for (var i = 0; i < this.numSegments; ++i) { |
| 34 var segmentCopy = segment.cloneNode(true); |
| 35 segmentCopy.style.webkitTransform = |
| 36 'rotate(' + (i * angle) + 'deg) skewY(' + |
| 37 -1 * (90 - angle) + 'deg)'; |
| 38 segmentsElement.appendChild(segmentCopy); |
| 39 this.segments.push(segmentCopy); |
| 40 } |
| 41 this.progressChanged(); |
| 42 } |
| 43 }); |
OLD | NEW |