Logo

Documentation v1.0.1

Preview
Light
Dark
System

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>
try metronic buy mega bundle
Preview Get Help Buy Now