We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Bind progress button observable

How do I bind the progress button to an observable to start the animation when a boolean is true and end the animation when it is false.?

Your current documentation does not show how to start or stop the animation. I would think this is a primary use case when waiting for an API to return. 

Please update your documentation with example on starting and stopping the animation programatically.  

3 Replies

MV Madhan Venkateshan Syncfusion Team November 7, 2019 04:57 PM UTC

Hi James, 
Thanks for contacting Syncfusion Support. 
We have checked your query. We would like to suggest you to use progress event to end the animation of the progress button using progressComplete method when the boolean changed to true. Please refer the below sample link. 
progress(args: ProgressEventArgs) { 
    if(this.isCompleted) { 
      this.isCompleted = false; 
Sorry for the inconvenience caused. We will update the documentation in our upcoming release. 
Madhan V 

LO Leandro Ortiz August 5, 2021 10:47 PM UTC

There is a way to show the progress without setting a duration?

In your example, you're setting 10 seconds as the duration but it doesn't look like a good solution.

I'd like to show the progress when the user clicks the button and stop when the process has been done. But in some cases, the process could take more or less time and the spinner button may be shown or hide when has not to.

Do you have an example or documentation for this cases?

AS Aravinthan Seetharaman Syncfusion Team August 9, 2021 03:42 AM UTC

We have checked your query. We would like to let you know that this is our control behaviour. And we suggest you to set the maximum duration using duration property and start and stop the progress using methods available in ProgressButton. Please refer the below code snippet and sample. 
<button ejs-progressbutton #progressObj content="Spin Left" [isPrimary]="true" [duration]="isDuration" (progress)="progress($event)"></button> 
export class AppComponent { 
  public progressObj: ProgressButtonComponent; 
  isDuration: number = 1000 * 60 * 59 + 59 * 1000; 
  onStart() { 
  onStop() { 
Could you please check the above details and get back to us, if you need assistance on this. 
Aravinthan S

Live Chat Icon For mobile
Up arrow icon