CODEWITHSUNDEEP
jquery
markb
markb

Reputation: 1295

Shrink width of div over variable duration

I'm trying to create a countdown progress bar (like the opposite of a progress bar going from 100% to 0%).

I have the <div> that starts at 100% width, and over a duration in seconds I want it to shrink to 0 - then the page will reload.

I was hoping to do it in jQuery.

Upvotes: 0

Views: 32

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18965

You can implement a interval and set width for div like this

var progressBar = $('#progress-bar'),
width = 100;

var interval = setInterval(function() {

    width -= 1;

    progressBar.css('width', width + '%');

    if (width == 0) {
        clearInterval(interval);
        //redirect page here
        //window.unload(function(){});
    }
}, 1000)


var progressBar = $('#progress-bar'),
width = 100;

var interval = setInterval(function() {

    width -= 1;

    progressBar.css('width', width + '%');

    if (width == 0) {
        clearInterval(interval);
        //redirect page here
        //window.unload(function(){});
    }
}, 1000)
#progress-bar {
    
    height: 10px;
    background: green;
    text-align: center;
    overflow: hidden;   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progress-bar"></div>

Upvotes: 0

Related Questions