animated loading bar doesn't start at zero

Question

I'm working on a project that uses Django on the backend and Bootstrap on the frontend. I'm a noob when it comes to fronted, JS is black magic to me.

I need an animated loading bar that goes from 0% to 100% within X seconds. I managed to cobble something together that works, sometimes.

The problem is that the loading bar doesn't always start at 0%. It seems to start where ever it feels like starting, sometimes it even starts at 100%. The loading bar sits inside a modal that pops up when the user clicks a button.

After a clue from Boris K the actual question seems to be: How do I get the js running as soon as the modal opens.

Example of 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>

progress_bar.js

// loading time must be set in milliseconds, multiply by 1000
var loading_time = loading_time * 1000
$(".progress-bar").animate({width: "100%"}, loading_time);

Answer 1

You currently trigger the animation directly when the page loads. Meaning that the animation starts when the modal is still hidden. Instead trigger the animation when the modal is shown.

You can find the different events for a modal in the Bootstrap documentation .

In this scenario I went with:

shown.bs.modal

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

 var loading_time = 8; // loading time must be set in milliseconds, multiply by 1000 var loading_time = loading_time * 1000; $("#scanBanknote").on("shown.bs.modal", function (event) { $(".progress-bar").animate({width: "100%"}, loading_time); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#scanBanknote"> Click Me </button> <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>

Since you say it's difficult to understand in a different context, here is how things might look when applied to your scenario:

<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 src="{%static 'js/progress_bar.js'%}"></script>
<script>
    $("#scanBanknote").on("shown.bs.modal", () => initProgressBar(8));
</script>

progress_bar.js

function initProgressBar(loading_time) {
    // loading time must be set in milliseconds, multiply by 1000
    loading_time *= 1000;
    $(".progress-bar").animate({width: "100%"}, loading_time);
}

Answer 2

Click "Run code snippet" below. As you can see, the bar Always start at 0%.

Maybe, the animation starts when the page loads, be because the modal is hidden, you cannot see it until opened.

In that case, you have to run the $(".progress-bar").animate code only when the modal is opened

 var loading_time = 8 loading_time = loading_time * 1000 $(".progress-bar").animate({width: "100%"}, loading_time);

 .progress-bar { height: 10px; background: red; }.progress { width: 500px; background: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>