How to get a progress-bar in syncfusion React?

[Unknown]

I am using the syncfusion JS component for React and Angular. I don't see a progress-bar component. How do you advise I put one in apps with your library? https://material.io/develop/ios/components/progress-indicators/progress-views/

[John Rajaram]

Hi Set Bro, 

Thank you for contacting Syncfusion support. 

We like to let you know that, currently we do not have immediate plan about implementing “Progress bar component in Essential JS2”. But can you please share us the use case and required features list of “Progress bar” component which you have planned to use in your application? So that we will validate and prioritize accordingly during implementation.  

Regards, 

John R 

[Unknown]

Hi,

To express an unspecified wait time or display the length of a process. Example: https://material.io/design/components/progress-indicators.html

It looks like your framework has them but only inside of the upload component or in the progressButtons.

[Silambarasan I]

Hi Set Bro, 

 

Thanks for your update. 

 

As we stated earlier, currently we do not have immediate plan about implementing “Progress bar component in Essential JS2”.  However, we have customized the ProgressButton component to achieve your requirement “To express an unspecified wait time or display the length of a process”. Please refer the below stackblitz sample and code example. 

 

Sample: 

https://stackblitz.com/edit/react-rkrag2?file=index.js 

 

index.js 

 

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons'; 

 

//… 

 

export class ProgressButton extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.duration = 6000;     

  } 

  startProgress(args) { 

    this.progressObj.start(); 

  } 

  render() { 

    return ( 

      <div> 

        <ProgressButtonComponent enableProgress duration={this.duration} cssClass="e-hide-spinner" ref={(scope) => { this.progressObj = scope; }} disabled></ProgressButtonComponent> 

        <br /> 

        <br /> 

        <button onClick={this.startProgress.bind(this)}>Start Progress</button> 

      </div> 

    ); 

  } 

} 

 

 

index.css 

 

/* ProgressButton customization */ 

.e-progress-btn { 

  width: 100%; 

  padding: 0; 

  height: 4px; 

  border: none; 

  background-color: lightblue; 

} 

 

.e-progress-btn .e-progress { 

  background-color: #6a6ae9; 

} 

 

 

Could you please check the above sample and get back to us if you need any further assistance? 

 

Regards, 

Silambarasan 

[Unknown]

Great!

[Silambarasan I]

Hi Set Bro, 

 

Thanks for your update. We are happy to hear that your requirement has been achieved. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Silambarasan