How to use the progress animation when we do not know the duration but only the percent ?

Hi,
I don't understand the philosophy of the progress bar.
Most of time in this case we have a percent value but we do not know the duration, anyway not at the beginning.
We can calculate an estimate duration if we store the time at the beginning and then compare percent with the elapsed time.
How can I manage this situation ?



3 Replies

MK Mohan Kumar Ramasamy Syncfusion Team December 3, 2020 11:58 AM UTC

Hi jylaxx, 
 
We have checked your reported query. We can achieve your requirement using currentDuration in progress event arguments. Please refer below code snippets. 
 
 
let progressBtn: ProgressButton = new ProgressButton({ 
  content: "Progress", 
  enableProgress: true, 
  duration: 5000, 
  begin: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.currentDuration + " ms"; 
    progressBtn.dataBind(); 
  }, 
  progress: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.currentDuration + " ms"; 
    progressBtn.dataBind(); 
  }, 
  end: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.currentDuration + " ms"; 
    progressBtn.dataBind(); 
  }, 
  cssClass: "e-hide-spinner" 
}); 
 
progressBtn.appendTo("#progressbtn"); 
 
<button id='progressbtn'></button> 
 
 
 
For your reference, we have prepared a sample based on this, please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 



JY jylaxx December 3, 2020 04:36 PM UTC

Hi,
Well my english must be very bad... or may be the answer too simple.
My question is how can I manage the progress bar when I DO NOT know the duration of the task.
I have only the percent.
What I am expecting is the possibility to set the percent in the progress event and to expand the duration until 100% is reached.
Changing the duration value is not possible as soon as the progress is started.
My task could be between few seconds and several hours and I don't have this value at the beginning but only an estimation after a while.
I can't find example where I have to monitor a task with a duration known at the beginning. 
Most of the time I have the number of iterations of an elementary task but no idea of the duration of the sum of the iterations.
May be this component is not suitable for what I am trying to do.
Regards



MK Mohan Kumar Ramasamy Syncfusion Team December 7, 2020 02:57 PM UTC

Hi jylaxx, 
 
We have checked for your reported query. We can achieve your requirement using Progress event. We have set (20000 ms) setTimeOut for Post action process and we have changed the args.percent value when setTimeOut complete. Please refer below code snippets. 
 
 
let isSuccess: boolean = false; 
let progressBtn: ProgressButton = new ProgressButton({ 
  content: "Progress", 
  enableProgress: true, 
  duration: 30000, 
  begin: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.percent + " %"; 
    progressBtn.dataBind(); 
  }, 
  progress: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.percent + " %"; 
    progressBtn.dataBind(); 
    setTimeout(function() { 
      isSuccess = true; //Post action success 
    }, 20000); 
    if (isSuccess) { 
      args.percent = 99; 
      progressBtn.content = "Progress " + args.percent + " %"; 
      progressBtn.dataBind(); 
      // progressBtn.progressComplete(); 
    } 
  }, 
  end: (args: ProgressEventArgs) => { 
    progressBtn.content = "Progress " + args.percent + " %"; 
    progressBtn.dataBind(); 
  }, 
  cssClass: "e-hide-spinner" 
}); 
 
progressBtn.appendTo("#progressbtn"); 
 
 
For your reference, we have prepared a sample based on this. Please refer below link. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


Loader.
Up arrow icon