Customize progress bar theme and sizing in EJ2 TypeScript Toast control

10 May 20235 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.

import {Toast, ToastModel} from '@syncfusion/ej2-notifications';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let toast: Toast = new Toast({
  title: 'Matt sent you a friend request',
  content: 'You have a new friend request yet to accept',
  showProgressBar: true,
  position: { X: 'Right', Y: 'Bottom' }
  beforeOpen: onBeforeOpen
});

let listObjprogressColor: DropDownList = new 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 = () => {
  toast.show();
}

function valueChange() {
    let progressEles: NodeList = toast.element.querySelectorAll('.e-toast-progress');
    progressEles.forEach((ele: HTMLElement)=> {
      ele.style.backgroundColor = listObjprogressColor.value;
    })
}

function onBeforeOpen(e: ToastBeforeOpenArgs): void {
  let 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/25.1.35/material.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="loader">LOADING....</div>
    <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>
</body>

</html>