-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (111 loc) · 4.16 KB
/
index.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Animation library</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js'></script>
<style>
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
h1 {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 48px;
font-weight: normal;
margin-bottom: 48px;
}
#animations-wrapper {
width: 90%;
max-width: 640px;
}
.animation-wrapper {
margin-bottom: 48px;
}
.animation {
margin-bottom: 32px;
}
.file-info {
padding: 8px;
background: #eee;
font-family: 'Monaco', 'Courier', monospace;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Animation library</h1>
<div id='animations-wrapper'>
<p>Loading…</p>
</div>
<script>
const filenames = [
'bank-and-accounting.json',
'card-big-picture.json',
'card-everyday-life.json',
'card-relevant.json',
'days-sales-outstanding.json',
'error-icon.json',
'onboarding-big-picture.json',
'onboarding-everyday-life.json',
'onboarding-relevant.json',
'waiting-for-data.json',
];
const animations = filenames.map(renderAnimation);
const wrapper = document.querySelector('#animations-wrapper');
animations.forEach(animation => wrapper.appendChild(animation));
wrapper.removeChild(wrapper.querySelector('p'));
function renderAnimation(filename) {
const el = document.createElement('div');
el.classList.add('animation-wrapper');
const animation = animationElement(filename);
const fileInfo = fileInfoElement(filename);
el.appendChild(animation);
el.appendChild(fileInfo);
return el;
}
function animationElement(filename) {
const el = document.createElement('div');
el.classList.add('animation');
bodymovin.loadAnimation({
container: el,
path: `animations/${filename}`,
renderer: 'svg',
loop: true
});
return el;
}
function fileInfoElement(filename) {
const el = document.createElement('pre');
el.classList.add('file-info');
el.textContent = 'Loading…';
fetch(`animations/${filename}`, { method: 'HEAD' })
.then(response => {
if (!response.ok) {
throw `HTTP status ${response.status}`;
}
el.textContent = infoText(filename, response.headers);
})
.catch(err => {
const msg = `Error occurred for ${filename}\n${err}`;
el.textContent = msg;
});
return el;
}
function infoText(filename, headers) {
const encoding = headers.has('Content-Encoding')
? headers.get('Content-Encoding')
: 'unknown';
const bytes = headers.has('Content-Length')
? headers.get('Content-Length')
: 'unknown';
const kB = bytes === 'unknown'
? bytes
: (Number.parseFloat(bytes) / 1000).toFixed(1);
return `Filename: ${filename}\nSize: ${kB} kB\nEncoding: ${encoding}`;
}
</script>
</body>
</html>