<div class="e-margin-l">
  <button class="e-btn e-btn-highlight" id="toggle" type="button">Show Busy Indicator Overlay</button>
</div>

<div class="e-margin-l">
  <button class="e-btn e-btn-highlight" id="toggleGlobal" type="button">Show Busy Indicator Overlay Global</button>
</div>

<div class="e-margin-l">
  <e-notification type="info">
    <e-notification-content>
      Open this example in playground to see how it really works.<br>
      The busy indicator will automatically disappear in 3 seconds.
    </e-notification-content>
  </e-notification>
</div>
<script>
  toggle.addEventListener('click', () => {
    window.e.utils.v2.ui.busyIndicator.show();

    setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide(), 3000);
  });

  toggleGlobal.addEventListener('click', () => {
    window.e.utils.v2.ui.busyIndicator.show({ isGlobal: true });

    setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide({ isGlobal: true }), 3000);
  });
</script>

<div class="e-margin-l">
  <button class="e-btn e-btn-highlight" id="toggle" type="button">Show Busy Indicator Overlay</button>
</div>

<div class="e-margin-l">
  <button class="e-btn e-btn-highlight" id="toggleGlobal" type="button">Show Busy Indicator Overlay Global</button>
</div>

<div class="e-margin-l">
  <e-notification type="info">
    <e-notification-content>
      Open this example in playground to see how it really works.<br>
      The busy indicator will automatically disappear in 3 seconds.
    </e-notification-content>
  </e-notification>
</div>
<script>
  toggle.addEventListener('click', () => {
    window.e.utils.v2.ui.busyIndicator.show();

    setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide(), 3000);
  });

  toggleGlobal.addEventListener('click', () => {
    window.e.utils.v2.ui.busyIndicator.show({ isGlobal: true });

    setTimeout(() => window.e.utils.v2.ui.busyIndicator.hide({ isGlobal: true }), 3000);
  });
</script>