Mono provides a variety of Loading button components with a little customization that suits its design standards. For more information, please see the official ladda Documentaion.
<!-- Expand Left -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="expand-left">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Expand Right -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="expand-right">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Expand Up -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="expand-up">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Expand Down -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="expand-down">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Contract -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="contract">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Contract Overlay -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="contract-overlay">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Zoom In -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="zoom-in">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Zoom Out -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="zoom-out">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Slide Left -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="slide-left">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Slide Right -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="slide-right">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Slide Up -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="slide-up">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
<!-- Slide Down -->
<button class="ladda-button btn btn-primary btn-ladda" data-style="slide-down">
<span class="ladda-label">Submit!</span>
<span class="ladda-spinner"></span>
</button>
Expand Left
Expand Right
Expand Up
Expand Down
Contract
Contract Overlay
Zoom In
Zoom Out
Slide Left
Slide Right
Slide Up
Slide Down