@tkrotoff/bootstrap-spinner
Example of a Bootstrap >= 4.2 spinner inside an <input>
:
<input class="form-control is-pending is-pending-sm">
<span class="spinner-border spinner-border-sm"></span>
<input class="form-control is-pending">
<span class="spinner-border"></span>
// Fix for IE, see https://github.com/postcss/autoprefixer/issues/1153
$input-height-without-calc-for-ie: str-replace($input-height, 'calc');
input.is-pending {
padding-right: calc(#{$spinner-width} - #{$input-border-width} * 2 + #{$input-padding-x});
&.is-pending-sm {
padding-right: calc(#{$spinner-width-sm} - #{$input-border-width} * 2 + #{$input-padding-x});
}
+ .spinner-border {
float: right;
margin-right: $input-padding-x / 2;
margin-top: calc((#{$input-height-without-calc-for-ie} + #{$spinner-height}) / -2);
&.spinner-border-sm {
margin-top: calc((#{$input-height-without-calc-for-ie} + #{$spinner-height-sm}) / -2);
}
}
}
Bootstrap 4 spinner for <input>
and <button>
Example: https://codesandbox.io/s/github/tkrotoff/bootstrap-spinner
- Small: less than 100 lines of SCSS
- No SVG, image... just CSS
- Works in latest browsers and IE >= 10
- Uses Bootstrap variables: nothing hardcoded
Usage
npm install @tkrotoff/bootstrap-spinner
Import bootstrap4-spinner.scss:
@import '~@tkrotoff/bootstrap-spinner/src/bootstrap4-spinner';
Modify your Bootstrap 4 code as follow:
<div class="form-group">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control is-pending">
<span class="spinner"></span>
</div>
<button class="btn btn-primary btn-spinner">
<span class="spinner"></span>
Submit
</button>
You can change the spinner size by overwriting Sass variable $spinner-size
:
@import '~@tkrotoff/bootstrap-spinner/src/bootstrap4-spinner';
$spinner-size: 40px;