CODEWITHSUNDEEP
jquerycssjquery-ui
sbru
sbru

Reputation: 887

JQuery Progressbar text hides Progressbar's animation

I was looking at the source code for JQuery's Progressbar: https://jqueryui.com/progressbar/#label. I noticed they declare the position of the progress-label to be absolute. This doesn't seem to be optimal because then you have to hard code a magic number to center it in the progressbar. They just say left: 50% but that's not really centered as you can see here: https://jsfiddle.net/zdfu5r9z/8 (code taken directly from the previous link provided). However when I tried using position: relative; text-align: center;, the text is now centered but it hides the animation of the progressbar as seen here http://jsfiddle.net/zdfu5r9z/5/. Any help would be greatly appreciated as to how I can center the text and have the animation work. Thanks!

Upvotes: 0

Views: 75

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

You can do something like this:

$(function() {
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
    
    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        },
        complete: function() {
            progressLabel.text( "Complete!" );
        }
    });

    function progress() {
        var val = progressbar.progressbar( "value" ) || 0;
        
        progressbar.progressbar( "value", val + 2 );
        
        if ( val < 99 ) {
            setTimeout( progress, 80 );
        }
    }
    setTimeout( progress, 2000 );
});
.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="progressbar"><div class="progress-label">Loading...</div></div>

Upvotes: 2

Related Questions