progress bar

for timer

by Sanjay Mysoremutt

HTML

<script src="//cdn.jsdelivr.net/bootstrap.progressbar/0.7.1/bootstrap-progressbar.js"></script>
<button id='start'>start</button>
<button id='reset'>reset</button>

<div class="progress1">
    <div class="progress__bar">&#10711;&#10711;&#10711;&#8987;&#8987;&#8987;&#10710;&#10710;</div>
</div>

<div class="progress2">
    <div class="progress__bar"></div>
</div>

CSS

.progress1 {
    margin: 30px;
}
.progress__bar {
    float: right;
    font-size: 2em;
    padding-left: .5em;
    letter-spacing: 1em;
    border: 2px solid darkblue;
    border-radius: 10px;
    display: inline-block;
    background: darkblue;
    color: cyan;
}

JavaScript

var timer_value = 10; //seconds

function setupBar1() {
        $bar = $('.progress__bar');
    
    $('#start').on('click', function() {
        startTimer(timer_value);
    });
    
    $('#reset').on('click', function() {
        $bar.html('&#10711;&#10711;&#10711;&#8987;&#8987;&#8987;&#10710;&#10710;');
    });
    
    function startTimer(seconds) {
        var progress = setInterval(function() {
            var txt = $bar.text();
            if (txt.length > 0) {
                $bar.text(txt.substring(1));
            }
            else {
                return clearInterval(progress);
            }
        }, 600);
    }
}

$(document).ready(function() {
    console.log('ready!');
    setupBar1();

});