Search results

Change the text content and styles of the ProgressButton during progress

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
index.js
index.html
// Initialize ProgressButton component
var uploadBtn = new ej.splitbuttons.ProgressButton({
    content: 'Upload',
    cssClass: 'e-hide-spinner',
    enableProgress: true,
    duration: 4000,
    begin: function() {
        uploadBtn.content = 'Uploading...';
        uploadBtn.cssClass = 'e-hide-spinner e-info';
        uploadBtn.dataBind();
    },
    end: function() {
        uploadBtn.content = 'Success';
        uploadBtn.cssClass = 'e-hide-spinner e-success';
        uploadBtn.dataBind();
        setTimeout(function() {
            uploadBtn.content = 'Upload';
            uploadBtn.cssClass = 'e-hide-spinner';
            uploadBtn.dataBind();
        }, 500)
    }});

// Render initialized ProgressButton.
uploadBtn.appendTo('#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://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="progressbtn"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>