Search results

Customize progress using cssClass in JavaScript Progress Button control

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.ts
index.html
styles.css
Copied to clipboard
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';

let vertcialProgress: ProgressButton = new ProgressButton({ content: 'Vertical Progress', enableProgress: true, cssClass: 'e-hide-spinner e-vertical', duration: 4000 });

vertcialProgress.appendTo('#vertical');

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

topProgress.appendTo('#top');

let reverseProgress: ProgressButton = new 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://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='vertical'></button>
        <button id='top'></button>
        <button id='reverse'></button>
    </div>
</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%;
}