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