Search results

Customize progress using cssClass in React Progress Button component

14 Apr 2021 / 1 minute 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.

Source
Preview
app.tsx
index.html
progress.css
app.jsx
Copied to clipboard
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

class App extends React.Component<{}, {}> {

  public render() {
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>
);
  }
}
ReactDom.render(<App />, document.getElementById('progress-button'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Progress Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="This demo for React Progress button has progress indicator and spinner. It supports texts, icons, styles, sizes, positions, and its customization." />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="spinner.css" rel="stylesheet" />
    <link href="progress.css" rel="stylesheet" />
    <link href="icon.css" rel="stylesheet" />
    <link href="events.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='progress-button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
button {
  margin: 25px;
}

.e-reverse-progress .e-progress {
  right: 0;
  left: auto;
}
Copied to clipboard
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('progress-button'));