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 .indicationclass 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:

JAVASCRIPT
HTML

// Element to indecate
var button = document.querySelector("#kt_button_1");

// Handle button click event
button.addEventListener("click", function() {
    // Activate indicator
    button.setAttribute("data-kt-indicator", "on");

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

<button type="button" class="btn btn-primary me-10" id="kt_button_1">
    <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>