progress bar

by John Allan

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="progress1234" class="progressbBarWrapper">
    <div class="progressMessage"></div>
    <div class="progressRemaining">Calculating...</div>
    <div class="progressBar">
         <div class="progressLabel">Working...</div>
    </div>
</div>

<button class="openProgress" data-for="progress1234">Open Progress</button><br>
<button class="updateProgress" data-for="progress1234">Update</button>

CSS

.progressBar,
.ui-progressbar {
    position: relative;
    clear:both;
}

.progressbBarWrapper {
    width:500px;
    border:1px solid black;   
    padding:30px;
}

.progressLabel {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.progressRemaining {
    float:left;
}

.progressMessage {
    float:right;
}

JavaScript

$(function() {
    var percentage = 0,
        message = '',
        timeRemaining = 125;
    
    function secondsToMinutes(secs) {
        
        if (secs === 0) {
            return 'Done';
        }
        
        var hours = Math.floor(secs / (60 * 60));
       
        var divisor_for_minutes = secs % (60 * 60);
        var minutes = Math.floor(divisor_for_minutes / 60);
     
        var divisor_for_seconds = divisor_for_minutes % 60;
        var seconds = Math.ceil(divisor_for_seconds);
        
        var string = '';
        
        if (hours > 0) {
            string = hours + ':';   
        }
        
        string += minutes + ':';
        string += seconds;
        
        return string;
    }
    
    function updateProgress(target, p, t, m) {
        target.find('.progressRemaining').text(secondsToMinutes(t));
        target.find('.progressMessage').text(m);
        target.find('.progressLabel').text(p + '%');
        
        target.find('.progressBar').progressbar('value', p);
    }
    
    $('.openProgress').on('click', function () {
        var id, $t;
        
        id = $(this).attr('data-for');
        $t = $('#' + id).find('.progressBar');
        
        $t.progressbar({
            value: false,
            complete: function() {
                alert( "Complete!" );
            }
        });
    });
    
    $('.updateProgress').on('click', function () {
        var id, $t;
        
        id = $(this).attr('data-for');
        $t = $('#' + id);
        
        timeRemaining = timeRemaining - 25;
        percentage = percentage + 20;
        
        if (percentage === 100) {
            message = "Complete!";
        }
                
        updateProgress($t, percentage, timeRemaining, message);
    });
    
});