I'm currently experimenting with increasing a progress bar using the setInterval function. So far, it seems to be functioning properly.
var progressBar = $('.progress-bar');
var count = 0;
var interval = setInterval(function () {
var width = progressBar.width();
console.log(width++);
progressBar.width(width);
count++;
if (count === 101) {
clearInterval(interval);
}
}, 50);.progress-bar {
width: 0px;
height: 4px;
background-color: #00f;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="progress-bar"></div>However, when I tried nesting it into a dropdown, I encountered issues with the timing of repeating actions:
var increase = function (progressBar, ms) {
var count = 0;
var interval = setInterval(function () {
var width = progressBar.width();
console.log(width++);
progressBar.width(width);
count++;
if (count === 21) {
clearInterval(interval);
}
}, ms);
}
$('.dropdown').on('shown.bs.dropdown', function () {
var progressBar = $(this).find('.progress-bar');
increase(progressBar, +progressBar.data('ms'));
});.progress-bar {
width: 0px;
height: 4px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e2fde2e2f7e0bcf8e1d2a3bca3a4bca2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 100ms
</button>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="100"></div>
</a>
</div>
</div>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 300ms
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="300"></div>
</a>
</div>
</div>Upon expanding the dropdown, the width of the progress bar increases. However, I've noticed that different values for repetition intervals yield unexpected results.
In this scenario, setting the value to 100 or lower leads to inaccurate width increments. The initial width value is 0, but after increasing by 1, why does it become 0.15625 and then 0.3125...?
On the other hand, when the value is set to 300 or higher, the width increments correctly (0, 1, 2...)
Any insights on why this is happening?