Customize progress using cssclass in React Progress button component

7 Aug 20232 minutes to read

You can customize the background filler UI using the cssClass property.

• Adding e-vertical to cssClass shows vertical progress.
• Adding e-progress-top to cssClass shows progress at the top.

You can also show reverse progress by adding custom class to the cssClass property.

app.jsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
    <ProgressButtonComponent content='Vertical Progress' enableProgress={true} cssClass='e-hide-spinner e-vertical' duration={4000}/>
    <ProgressButtonComponent content='Progress Top' enableProgress={true} cssClass='e-hide-spinner e-progress-top' duration={4000}/>
    <ProgressButtonComponent content='Reverse Progress' enableProgress={true} cssClass='e-hide-spinner e-reverse-progress' duration={4000}/></div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

app.tsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

  return (<div>
    <ProgressButtonComponent content='Vertical Progress' enableProgress = {true} cssClass='e-hide-spinner e-vertical' duration={4000}/>
    <ProgressButtonComponent content='Progress Top' enableProgress = {true} cssClass='e-hide-spinner e-progress-top' duration={4000}/>
    <ProgressButtonComponent content='Reverse Progress' enableProgress = {true} cssClass='e-hide-spinner e-reverse-progress' duration={4000}/></div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));