Search results

Customize progress bar theme and sizing in JavaScript Toast control

08 May 2023 / 1 minute 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.

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


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();  }


document.getElementById('show_toast').onclick = () => {;

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

function onBeforeOpen(e: ToastBeforeOpenArgs): void {
  let progress = e.element.querySelector('.e-toast-progress'); = document.getElementById('progressHeight').value + 'px'; = listObjprogressColor.value;
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <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 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 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>
        <div class="toast_row">
            <button class="e-btn" id="show_toast"> Show Toast</button>