I'm currently working on a project that utilizes Django for the backend and Bootstrap for the frontend. I have to admit, I am quite inexperienced when it comes to front-end development; JavaScript seems like magic to me.
One of the key features I need is an animated loading bar that smoothly progresses from 0% to 100% within a specified duration. Although I was able to create something that functions most of the time, there is a persistent issue.
The loading bar does not consistently start at 0%. It appears to start at random points, with occurrences where it even begins at 100%. This loading bar is situated within a modal window that pops up when the user clicks a button.
Following a helpful hint from Boris K, the main query seems to revolve around how to initiate the JavaScript function as soon as the modal window opens.
Below is an example snippet from an HTML file:
<div class="modal fade" id="scanBanknote" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Scanning banknote</h5>
</div>
<div class="modal-body">
Please wait...
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
<script>
var loading_time = 8
</script>
<script src="{%static 'js/progress_bar.js'%}"></script>
Contents of progress_bar.js:
// The loading time must be specified in milliseconds by multiplying it by 1000
var loading_time = loading_time * 1000
$(".progress-bar").animate({width: "100%"}, loading_time);