Bootstrap 5 spinner/loading/pending indicator for <input>, <extarea> and <select>. Input Spinner is a CSS / SCSS library that allows you to display a floating and customizable cursor within Bootstrap form controls such as input, text area, and selection.
bootstrap spinner, bootstrap loading overlay, bootstrap loading spinner modal, bootstrap 5 spinner button, bootstrap page loading spinner, bootstrap spinner center of the page
How to make use of it:
1. Install & download the Input Spinner.
# NPM $ npm i @tkrotoff/bootstrap-input-spinner
2. Import the Input Spinner into your Bootstrap mission.
@import '~bootstrap/scss/bootstrap'; @import './src/bootstrap-input-spinner';
3. Display the ‘spinner-border’ loading indicator in your type controls:
<!-- Input Field --> <div class="form-group is-loading"> <input class="form-control" /> <div class="spinner-border spinner-border-sm"></div> </div> <!-- Textarea --> <div class="form-group is-loading"> <textarea class="form-control"></textarea> <div class="spinner-border spinner-border-lg"></div> </div> <!-- Select --> <div class="form-group is-loading"> <select class="form-control"> <option>spinner-border spinner-border-sm</option> </select> <div class="spinner-border spinner-border-sm"></div> </div>
4. Display the ‘spinner-grow’ loading indicator in your type controls:
<div class="form-group is-loading"> <input class="form-control" /> <div class="spinner-grow"></div> </div> <div class="form-group is-loading"> <input class="form-control" placeholder="spinner-grow" /> <div class="spinner-grow"></div> </div>
Loading Indicator For Bootstrap Form Controls, bootstrap-input-spinner Plugin/Github
See Demo And Download
Official Website(tkrotoff): Click Here
This superior jQuery/javascript plugin is developed by tkrotoff. For extra Advanced Usages, please go to the official website.
Be First to Comment