Use the existing bootstrap CSS for progress bars

This commit is contained in:
Oliver Walters 2020-04-21 18:14:02 +10:00
parent 2c6e8da90e
commit 399dcafede
2 changed files with 15 additions and 26 deletions

View File

@ -31,37 +31,26 @@
/* Progress bars */
.progress-bar {
height: 25px;
background: #eee;
border-radius: 5px;
border: 1px solid #ddd;
width: 100%;
.progress {
position: relative;
width: 100%;
}
.progress-bar-value {
color: #000;
position: absolute;
top: 0px;
.progress-bar {
opacity: 50%;
}
.progress-value {
width: 100%;
color: #333;
position: absolute;
text-align: center;
top: 0px;
left: 0px;
font-weight: bold;
font-size: 110%;
}
.progress-bar-inner {
height: 23px;
width: 20%;
text-align: center;
vertical-align: middle;
background: #3a3;
opacity: 40%;
position: absolute;
top: 0px;
left: 0px;
}
.qr-code {
max-width: 400px;
max-height: 400px;

View File

@ -98,9 +98,9 @@ function makeProgressBar(value, maximum, opts) {
}
return `
<div class='progress-bar'>
<div class='progress-bar progress-bar-inner' style='width: ${percent}%;'></div>
<div class='progress-bar-value'>${value} / ${maximum}</div>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
<div class='progress-value'>${value} / ${maximum}</div>
</div>
`;
}