CODEWITHSUNDEEP
androidjquerysqlhtmlcordova
Saint Dee
Saint Dee

Reputation: 1015

How to create progress bar in html5, phonegap and jQuery

I am creating a web app for android using html5, phonegap and jquery mobile. What I want to do is create a progress bar while running a function that inserts sql to database, informing the client how many has been done and how much is there left.

Can you please direct me how to start this? I already have the functions to connect and insert data to sql.

many thanks.

Upvotes: 1

Views: 8652

Answers (3)

user511530
user511530

Reputation: 191

You might check out the new progress tag in html5. This link will show you which mobile browsers support this tag.

Upvotes: 3

Summved Jain
Summved Jain

Reputation: 890

Just like an above example, I have an improved one.

http://docs.jquery.com/UI/Progressbar

You can import the JS and CSS file given on the link above and then you can use the below code on Android WebApp. 

    $(function() {

        $("#progressbar").progressbar({ value: 10 });
        setTimeout(updateProgress, 500);

        });

        function updateProgress() {
          var progress;
          progress = $("#progressbar")
            .progressbar("option","value");
          if (progress < 100) {
              $("#progressbar")
                .progressbar("option", "value", progress + 5);
              setTimeout(updateProgress, 500);
          }
        }

This will move the progress with the increment of five after delay of half second. You can modify it as per the need.

Please let me know if this helps you

Kind Regards,

Summved

Upvotes: 0

namar0x0309
namar0x0309

Reputation: 2349

http://docs.jquery.com/UI/Progressbar

Just use 

$("#progressbar").progressbar({ value: ( STORED_DATA / TOTAL_DATA) });

For STORED_DATA, try to partition data sent to database ( while loop for example ).

Upvotes: -1

Related Questions