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

How to get a progress-bar in syncfusion React?

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/

5 Replies

JR John Rajaram Syncfusion Team October 10, 2018 01:46 PM UTC

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 



UN Unknown Syncfusion Team October 10, 2018 02:26 PM UTC

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.


SI Silambarasan I Syncfusion Team October 11, 2018 12:28 PM UTC

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: 
 
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 



UN Unknown Syncfusion Team October 11, 2018 02:23 PM UTC

Great!


SI Silambarasan I Syncfusion Team October 12, 2018 05:38 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon