// total files
let totalFiles = 42;
// closed files
let closedFiles = 30;
// find progress bar
const progressBar = document.querySelector('.progress-bar[role="progressbar"]');
// find remaining progress bar
const remainingBar = document.querySelector('.progress-bar[role="remaining"]');
function onFileChange() {
// calculate percentage
let percentage = Math.min(Math.max(Math.floor(closedFiles / totalFiles * 100), 0), 100);
// calculate remaining percentage
let remaining = 100-percentage;
// apply percentage
progressBar.style.width = percentage + '%';
progressBar.innerText = percentage + '%';
remainingBar.style.width = remaining + '%';
remainingBar.innerText = remaining + '%';
}
// simulate file change
document.querySelector('#totalFiles').addEventListener('change', e => {
totalFiles = e.target.value;
onFileChange();
});
document.querySelector('#closedFiles').addEventListener('change', e => {
closedFiles = e.target.value;
onFileChange();
});
onFileChange();
.progress-bar[role="remaining"] {
background-color: #888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">55%</div>
<div class="progress-bar" role="remaining" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">45%</div>
</div>
</div>
<!-- Simulatet file change controls -->
<form>
<div class="form-group">
<label for="totalFiles">Total Files</label>
<input type="number" class="form-control" id="totalFiles" placeholder="Total Files" value="42">
</div>
<div class="form-group">
<label for="closedFiles">Closed Files</label>
<input type="number" class="form-control" id="closedFiles" placeholder="Closed Files" value="30" />
</div>
</form>
</body>
</html>