Customize progress bar theme and sizing in EJ2 JavaScript Toast control

10 May 20236 minutes to read
By default, the progress bar appears based on the theme stylings and dimensions. You can customize the progress bar stylings using custom CSS or event functions.
The following sample demonstrates customizing the progress bar stylings using the beforeOpen event.
index.js
index.html
ej.base.enableRipple(true);

//Initialize Toast component
var toast = new ej.notifications.Toast({
  title: 'Matt sent you a friend request',
  content: 'You have a new friend request yet to accept',
  target: document.body,
  showProgressBar: true,
  position: { X: 'Right', Y: 'Bottom' },
  beforeOpen: onBeforeOpen
});

var listObjprogressColor = new ej.dropdowns.DropDownList({
    index: 0,
    placeholder: 'Select a animate type',
    popupHeight: '150px',
    change: () => { valueChange();  }
});
listObjprogressColor.appendTo('#Progress');

toast.appendTo('#element');
toast.show();

document.getElementById('show_toast').onclick = function () {
    toast.show();
};

function valueChange() {
    var progressEles = toast.element.querySelectorAll('.e-toast-progress');
    for(var i =0; i< progressEles.length; i++) {
        progressEles[i].style.backgroundColor = listObjprogressColor.value;
    }
}

function onBeforeOpen(e) {
  var progress = e.element.querySelector('.e-toast-progress');
  progress.style.height = document.getElementById('progressHeight').value + 'px';
  progress.style.backgroundColor = listObjprogressColor.value;
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <div class="toast_row" style="padding-top: 20px">
          <div class="e-float-input">
            <input class="e-input" id="progressHeight" name="Digits" value="4" required="">
            <span class="e-float-line"></span>
            <label class="e-float-text" for="Digits">Progress Bar Height</label>
            </div>
        </div>
        <div class="toast_row" style="padding-top: 20px">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <label> Progress Bar Color </label>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <select id="Progress">
                    <option value="red">Red</option>
                    <option value="cyan">Cyan</option>
                    <option value="blue">Blue</option>
                    <option value="yellow">Yellow</option>
                    <option value="pink">Pink</option>
                </select>
            </div>
        </div>
        <div class="toast_row">
            <button class="e-btn" id="show_toast"> Show Toast</button>
        </div>
    </div>


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