Search results

Change the text content and styles of the ProgressButton during progress in JavaScript ProgressButton control

You can change the text content and styles of the ProgressButton during progress by changing the text content and the cssClass property at the begin and end events.

Source
Preview
app.ts
index.html
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';

let uploadBtn: ProgressButton = new ProgressButton({
    content: 'Upload',
    cssClass: 'e-hide-spinner',
    enableProgress: true,
    duration: 4000,
    begin: () => {
        uploadBtn.content = 'Uploading...';
        uploadBtn.cssClass = 'e-hide-spinner e-info';
        uploadBtn.dataBind();
    },
    end: () => {
        uploadBtn.content = 'Success';
        uploadBtn.cssClass = 'e-hide-spinner e-success';
        uploadBtn.dataBind();
        setTimeout(() => {
            uploadBtn.content = 'Upload';
            uploadBtn.cssClass = 'e-hide-spinner';
            uploadBtn.dataBind();
        }, 500)
    }
}, '#progressbtn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 ProgressButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="This demo for Essential JS2 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="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <button id='progressbtn'></button>
    </div>
</body>

</html>