Customize progress using cssClass in React Progress button component

2 Mar 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.

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