Creating Spinner Buttons


With Bootstrap you can easily include spinner icon in a button to indicate the loading state in your application. Check out the following example to see how it works:

Example

<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>

In the next chapter you will learn how to combine multiple buttons horizontally or vertically in a line like toolbars using the Bootstrap button groups component. Also, in the advanced section you will learn how to create toggle buttons without using any JavaScript code.


Leave a Reply

Your email address will not be published. Required fields are marked *