progress bar with percentage jquery mobile

Question

I am trying to develop a mobile application using jquery mobile, as I am doing the work with the web service. I want it to display a progress bar with percentage of completion.

Answer 1

Full disclosure: I have written this open source plugin

You may try the jQuery-Mobile-Progress-Bar-with-Percentage plugin.

The jQuery-Mobile-Progress-Bar-with-Percentage (Tolito Progress Bar) is a plugin for jQuery Mobile which creates, manages, starts, stops, resumes and explicitly sets the value of a progress bar. In addition the constructor provides the options to set the progress bar's outer theme and inner filling theme on the basis of the jQuery Mobile standard themes, to show a percentage completion counter, to set whether the progress bar has normal or mini size, to define the interval which specifies the filling frequency rate, to configure the max value of the outer bar and set the initial value of the filling inner bar. The JavaScript prototype chaining method has been used in order to enable the chaining of separate method calls where each call is made on the same instance.

EDITED: The new version 1.0.3 contains functionality to stop and/or resume the progress bar and to explicitly set the progress bar's value. This fits to the cases where some AJAX requests need to be performed and in each successful response the progress bar value has to be set explicitly in order to represent the actual progress status. Furthermore an event is triggered when the progress bar is completed.

The JavaScript prototype chaining method has been used in order to enable the chaining of separate method calls where each call is made on the same instance.

The following piece of code configures, builds and initializes a progress bar:

TolitoProgressBar('progressbar')
    .setOuterTheme('b')
    .setInnerTheme('e')
    .isMini(true)
    .setMax(100)
    .setStartFrom(0)
    .setInterval(10)
    .showCounter(true)
    .logOptions()
    .build()
    .run();

Example with mini progress bar:

Example with a normal progress bar inside a dialog:

Example with an overlay which includes a normal progress bar:

Answer 2

Try this:

CSS

.progress { position:relative; width:260px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; max-width:240px; border-radius: 3px; background-image: url(../images/pbar-ani.gif); }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }

JS

Change duration parameter to your estimated time.

$(".bar").animate({width:'100%'},{duration:5000,step:function(now,fx){
    var pc = parseInt(now)+'%';
    $(".percent").html(pc);}
});