Overview

Indicator is a custom component used in combination with Bootstrap Spinners, Bootstrap Spinners  and other components to provide a progress indication toggling for a user action.

Basic

Use .indication class on a button and specify the button's label and progress message and toggle the indicator state with data-kt-indicator="on" custom HTML attribute. 
          <!-- Default state -->
<button type="button" class="btn btn-primary me-10">
  <span class="indicator-label">Submit</span>
  <span class="indicator-progress">
    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
  </span>
</button>

<!-- Progress enabled state -->
<button type="button" class="btn btn-primary" data-kt-indicator="on">
  <span class="indicator-label">Submit</span>
  <span class="indicator-progress">
    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
  </span>
</button>

Toggle

Click on the below buttons to check toggling indicator state with a simple Javascript code. 
              <button type="button" class="btn btn-primary me-10" id="button1">
  <span class="indicator-label">Submit</span>
  <span class="indicator-progress">
    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
  </span>
</button>
            
              // Handle button click event.
document.getElementById('button1').addEventListener('click', event => {
  // Element to indecate.
  const button = event.currentTarget;

  // Activate indicator.
  button.setAttribute('data-kt-indicator', 'on');

  // Disable indicator after 3 seconds.
  setTimeout(function() {
    button.removeAttribute('data-kt-indicator');
  }, 3000);
});