-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
35 lines (28 loc) · 1.16 KB
/
app.js
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
const simulateDownload = (progress) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(progress + 1);
}, 50);
}).then(res => res);
};
document.querySelector('.download-button').onclick = () => {
const documentStyles = document.documentElement.style;
const progressButton = document.querySelector('.progress-button');
const percentage = document.querySelector('.percentage');
const loadingText = document.querySelector('.loading-text');
const buttonText = document.querySelector('.button-text');
progressButton.classList.add('in-progress');
(async () => {
let progress = 0;
while (progress < 100) {
progress = await simulateDownload(progress);
if (progress % 5 === 0) {
loadingText.innerHTML = `Loading${Array(progress % 4).fill('.').join('')}`;
documentStyles.setProperty('--progress', `${progress}%`);
}
percentage.innerText = `${progress}%`;
}
buttonText.innerText = '🎉 Done';
setTimeout(() => progressButton.classList.replace('in-progress', 'finished'), 1000);
})();
}