Fill the progress bar in x seconds

Question

I have this code ...

HTML

<div class="progress-bar">
    <span class="progress-bar-fill" style="width: 30%"></span>
</div>

CSS

.progress-bar {
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    transition: width 250ms ease-in-out;
}

It should show the progress of the slider and how long the current image will last until the next apperas ....

If the image changes every 5 seconds, then I want the panel to fill 100% in 5 seconds ... I am a complete noob in javascript and jQuery ...

Answer 1

You can use it.

Update: do transition5 seconds.

transition: width 5s ease-in-out;

$('.progress-bar-fill').delay(1000).queue(function () {
        $(this).css('width', '100%')
    });

.progress-bar {
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    /*transition: width 250ms ease-in-out;*/
    transition: width 5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
    <span class="progress-bar-fill" style="width: 30%"></span>
</div>

Run codeHide result

Hope this helps you.

Answer 2

Your jQuery may have specified a one-shot transition ad.

Fill 5s:

$(".progress-bar-fill").css({"width":"100%","transition":"5s"});

To clean immediately:

$(".progress-bar-fill").css({"width":"0%","transition":"none"});