How to customize progress with cssClass in React Progress Button

17 Aug 20262 minutes to read

Customize the progress bar appearance by applying CSS classes through the cssClass property. These built-in classes modify how the progress fills and displays within the button.

  • e-vertical - Displays the progress fill vertically (top-to-bottom) instead of horizontally.
  • e-progress-top - Positions the progress fill at the top edge of the button instead of bottom.

You can also create a reverse progress effect (right-to-left fill) by adding a custom CSS class to the cssClass property with appropriate CSS rules that override the default fill direction.

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'));
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'));