https://github.com/pixelunion/bc-loading
https://github.com/pixelunion/bc-loading
library
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/pixelunion/bc-loading
- Owner: pixelunion
- License: mit
- Created: 2018-05-08T18:39:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T22:23:20.000Z (over 3 years ago)
- Last Synced: 2024-03-26T12:58:29.984Z (over 2 years ago)
- Topics: library
- Language: JavaScript
- Size: 155 KB
- Stars: 0
- Watchers: 18
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# BigCommerce Loading Overlay Module
Scope an overlay to a specific area, or cover the whole page (for use while waiting on API response).
### Installation
NPM:
```
npm install --save github:pixelunion/bc-loading
```
### Usage
```
import $ from 'jquery';
import Loading from 'bc-loading';
const loadingOptions = {
loadingMarkup: '
',
visibleClass: 'visible',
scrollLockClass: 'scroll-locked',
};
const cartTotalsOverlay = new Loading(loadingOptions, false, '[data-cart-totals]');
const shippingCalculator = new ShippingCalculator({
willUpdate: () => cartTotalsOverlay.show(),
didUpdate: () => cartTotalsOverlay.hide(),
});
```
### Options
Instantiate with:
`new Loading(options, scrollLock, scope);`
**loadingMarkup:** Simple markup comprsing your loading overlay.
**visibleClass:** Class to be applied to show overlay (e.g, `'visible'`).
**scrollLockClass** Class to be applied to stop the body from scrolling (e.g, `'scroll-locked'`).
**scrollLock** Pass a boolean value into each instance of the loading overlay to dictate whether or not the scroll lock should be used.
**scope** Pass an element selector into each instance of the loading overlay to scope the overlay to a particular area (defaults to `'body'`).