Geek Answers Handbook

Progress bar with jquery mobile percentage

I am trying to develop a mobile application using jQuery mobile as I am working with a web service. I want it to display a progress bar with a percentage of completion.

+4
source share
2 answers

Full disclosure: I wrote this open source plugin

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

JQuery-Mobile-Progress-Bar-with-Percentage (Tolito Progress Bar) is a jQuery Mobile plugin that creates, manages, starts, stops, resumes and explicitly sets the progress bar. In addition, the constructor provides options for setting an external run theme theme and an internal fill theme based on standard themes for jQuery Mobile to show a percent completion counter to determine if the progress bar has a normal or mini size to determine the interval that determines the frequency filling to set the maximum value of the external panel and set the initial value of the internal panel of filling. The JavaScript prototype chaining method was used to activate a chain of individual method calls, where each call is made in one instance.

Edition: The new version 1.0.3 contains functionality to stop and / or resume the progress bar and explicitly set the value of the progress bar . This is appropriate for cases where it is necessary to execute some AJAX requests, and in each successful response, the value of the progress bar should be explicitly set to represent the actual status of the execution. In addition, the event is fired when the progress bar is complete.

The JavaScript prototype chaining method was used to activate a chain of individual method calls, where each call is made in one instance.

The following code snippet configures, builds, and initializes the progress bar:

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

Example with a mini progress bar:

enter image description here

An example with a normal progress bar inside a dialog box:

enter image description here

An overlay example that includes a normal progress bar:

enter image description here

+8
source

Try the following:

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 the duration parameter to the estimated time.

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

More articles:


All Articles