How to add a progress bar for uploading file in tiggzi

[Yurii Orishchuk]

Hi Berenice,

Currently it's hard to say what is wrong.

We need to see what is not work in your app. So please give us your app public link and describe steps to reproduce this problem.

We will take a look.

Thanks & regards.

[Berenice]

Hi !

You can test it here : http://appery.io/app/mobile-frame?src...

Just click the "search" button, and the loading bar is meant to be loaded at the beginning of the 2nd page called "results"

Thanks for your help !

[Yurii Orishchuk]

Hi Berenice,

Please use following code to invoke plugin.

pre

jQuery('[name="progressbar_div"]').progressbar({
value: 0
});

/pre

Regards.

[Berenice]

Hey,

Ok it seems to display a bar but the bar is loaded right away. Instead, is there a way to force the bar to load over 10 seconds for instance ? (and not faster than that, because I want it to show)

Thanks for your answer !

[Berenice]

And I just noticed that it doesn't adapt its dimensions to the screen as well (= not responsive). Any way to fix that ? Thank a lot

[Yurii Orishchuk]

Hi Berenice,

To animate this progessBar with some delay please use following code:

pre

//Adjust it with animation seconds you need.
var delayToFullLoad = 10;

var currentProgress = 0;

var onInterval = function(){

Code: Select all

 jQuery('[name="progressbar_div"]').progressbar({ 
     value: currentProgress 
 }); 

 currentProgress++; 

 if(currentProgress  100) 
     window.clearInterval(invervalId); 

};

var invervalId = window.setInterval(onInterval, delayToFullLoad * 1000 / 100);

/pre

To make your progressBar responsive you need to set "dimensions" property for your html copmonent with "auto" value.

See details on screen shot: http://prntscr.com/462lns/direct

Regards.

[Berenice]

Hi, thanks for your fast answer.
I will try that and let you know

[Berenice]

Thank you, it works perfectly now. You are awesome !! ))
Just one last thing, if that is not too much to ask I d like to display the content of an HTML div when the progress bar finishes loading (to display the results). How can I do that ?

Thanks again for all your help

[Yurii Orishchuk]

Hi Berenice,

For this goal you can modify the code above with following one:

pre

//Note you should replace "htmlComponentName" with your html component name.
//Hide component at start.
Apperyio("htmlComponentName").hide();

//Adjust it with animation seconds you need.
var delayToFullLoad = 10;
var currentProgress = 0;
var onInterval = function(){
jQuery('[name="progressbar_div"]').progressbar({
value: currentProgress
});
currentProgress++;
if(currentProgress 100){
window.clearInterval(invervalId);

Code: Select all

     //Note you should replace "htmlComponentName" with your html component name. 
     //Show component when finished. 
     Apperyio("htmlComponentName").show(); 

 }; 

};
var invervalId = window.setInterval(onInterval, delayToFullLoad * 1000 / 100);

/pre

Regards.