Bootstrap 5 spinner/loading/pending indicator Form Controls

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