Search results

Customize progress using cssClass in JavaScript (ES5) ProgressButton control

29 Jul 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
index.js
index.html
styles.css
Copied to clipboard
var vertcialProgress = new ej.splitbuttons.ProgressButton({content: 'Vertical Progress', enableProgress: true, cssClass: 'e-hide-spinner e-vertical', duration: 4000});

vertcialProgress.appendTo('#vertical');

var topProgress = new ej.splitbuttons.ProgressButton({content: 'Top Progress', enableProgress: true, cssClass: 'e-hide-spinner e-progress-top', duration: 4000});

topProgress.appendTo('#top');

var reverseProgress = new ej.splitbuttons.ProgressButton({content: 'Reverse Progress', enableProgress: true, cssClass: 'e-hide-spinner e-reverse-progress', duration: 4000});

reverseProgress.appendTo('#reverse');
Copied to clipboard
<!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 sample is to customize progress indicator with top, reverse and vertical in the progress button">
    <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="vertical"></button>
        <button id="top"></button>
        <button id="reverse"></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>
Copied to clipboard
.e-reverse-progress .e-progress {
  right: 0;
  left: auto;
}

button {
  margin: 25px;
}

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}