Skip to content

Bootstrap 5 spinner/loading/pending indicator for <input>, <textarea> and <select>

License

Notifications You must be signed in to change notification settings

tkrotoff/bootstrap-input-spinner

Repository files navigation

@tkrotoff/bootstrap-input-spinner

npm version Node.js CI Prettier

Bootstrap 5 spinner/loading/pending indicator for <input>, <textarea> and <select>

demo

Example: https://codesandbox.io/s/github/tkrotoff/bootstrap-input-spinner/tree/codesandbox.io

Check the changelog for breaking changes and fixes between releases.

⚠️ Latest implementation for Bootstrap >= 4.2 & < 5 is @tkrotoff/bootstrap-input-spinner v0.10.2

⚠️ Latest implementation for Bootstrap < 4.2 is @tkrotoff/bootstrap-spinner v0.0.4

Usage

npm install @tkrotoff/bootstrap-input-spinner

Import bootstrap-input-spinner.scss:

@import '~@tkrotoff/bootstrap-input-spinner/src/bootstrap-input-spinner';

Modify your Bootstrap 5 code as follow:

<div class="mb-3">
  <label for="email">Email address</label>
  <div class="is-loading">
    <input type="email" id="email" class="form-control">
    <div class="spinner-border spinner-border-sm"></div>
  </div>
</div>