Wondering what’s next for npm?Check out our public roadmap! »

This package has been deprecated

Author message:

Use @tkrotoff/bootstrap-input-spinner instead

@tkrotoff/bootstrap-spinnerTypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

@tkrotoff/bootstrap-spinner

Build Status

⚠️ This code is kind of "obsolete" now since Bootstrap >= 4.2 includes spinners: https://getbootstrap.com/docs/4.2/components/spinners/

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>

demo

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;

Install

npm i @tkrotoff/bootstrap-spinner

DownloadsWeekly Downloads

2

Version

0.0.4

License

MIT

Unpacked Size

9.77 kB

Total Files

6

Last publish

Collaborators

  • avatar