xenofem/transbeam
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Wiki Activity

make overall progress bar nicer too

Browse source
This commit is contained in:
xenofem 2022-04-28 02:28:10 -04:00
parent 93da22569c
commit b520304a9d
3 changed files with 9 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/index.html
View file

@ -21,9 +21,7 @@
</div>
<div id="progress_container" style="display: none;">
<div id="progress"></div>
<div id="progress_bar">
<div id="progress_bar_filled"></div>
</div>
<div id="progress_bar"></div>
</div>
<div id="file_list_container" style="display: none;">
<table id="file_list">

13
static/transbeam.css
View file

@ -14,16 +14,13 @@ body {
margin: 10px auto;
}
#progress_bar, #progress_bar_filled {
height: 20px;
border-radius: 8px;
}
#progress_bar {
height: 20px;
border-radius: 10px;
border: 1px solid #48f;
}
#progress_bar_filled {
width: 0;
background-color: #27f;
background-image: linear-gradient(0deg, #27f, #27f);
background-repeat: no-repeat;
background-size: 0;
}
table {

6
static/transbeam.js
View file

@ -15,7 +15,7 @@ const downloadLink = document.getElementById('download_link');
const progressContainer = document.getElementById('progress_container');
const progress = document.getElementById('progress');
const progressBarFilled = document.getElementById('progress_bar_filled');
const progressBar = document.getElementById('progress_bar');
let files = [];
@ -71,8 +71,8 @@ function updateProgress() {
} else {
percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
}
progress.textContent = percentage;
progressBarFilled.style.width = percentage;
progress.textContent = `${percentage} (${displaySize(bytesSent)}/${displaySize(totalBytes)})`;
progressBar.style.backgroundSize = percentage;
const fileEntries = Array.from(fileList.children);
for (entry of fileEntries.slice(0, fileIndex)) {