Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hekigan/is-loading
Simple library to show visual feedback when loading data or any action that would take time
https://github.com/hekigan/is-loading
is-loading loader loading overlay
Last synced: 7 days ago
JSON representation
Simple library to show visual feedback when loading data or any action that would take time
- Host: GitHub
- URL: https://github.com/hekigan/is-loading
- Owner: hekigan
- License: mit
- Created: 2013-04-11T16:57:48.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T22:16:54.000Z (almost 2 years ago)
- Last Synced: 2024-09-17T12:37:46.120Z (about 2 months ago)
- Topics: is-loading, loader, loading, overlay
- Language: JavaScript
- Homepage: http://hekigan.github.io/is-loading/
- Size: 667 KB
- Stars: 224
- Watchers: 14
- Forks: 102
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# is-loading
[](https://www.npmjs.com/package/is-loading)
[](https://travis-ci.org/hekigan/is-loading)
[](https://david-dm.org/hekigan/is-loading)
[](https://coveralls.io/github/hekigan/is-loading)
[](https://nodei.co/npm/is-loading/)
> Simple script to show visual feedback when loading data or any action that would take time.
> Vanilla script built with ES2015.
> Exported as CommonJS, ES2015 and UMD. So it should work everywhere.
### Usage
Vanilla javascript
```js
import isLoading from 'is-loading';
```
### Examples and Demo
http://hekigan.github.io/is-loading/
### Installation
Install via [yarn](https://github.com/yarnpkg/yarn)
yarn add is-loading
or npm
npm install is-loading
### configuration
You can pass in extra options as a configuration
*Parameters:*
By default all modes accept a DOM element as the first parameter, and an `option` object as the second.
```js
isLoading(targetElement, options);
```
Full overlay mode is an exception with either *no parameters* or 1 parameter for the `option` object.
```js
isLoading(options);
```
```js
import isLoading from 'is-loading';
```
➖ **targetElement** ( DOMElement )
📝 The first parameter is expected to be a DOMElement.
💡 example
```js
import isLoading from 'is-loading';
const $elt = document.querySelector('input[type="submit"]');
// Start the script
isLoading($elt).loading();
// Stop the script
isLoading($elt).remove();
```
➖ **options** ( Object )
📝 The second parameter is an Object to set options.
💡 default
```js
const optionsDefault = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'loading', // Text to display in the loader
'disableSource': true, // true | false
'disableList': []
};
```
💡 example
```js
import isLoading from 'is-loading';
// Assuming that we have a login form
const $button = document.querySelector('input[type="submit"]');
const $username = document.querySelector('#username');
const $password = document.querySelector('#password');
options = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'login...', // Text to display in the loader
'disableSource': true, // true | false
'disableList': [$username, $password]
};
// using a variable
const loader = isLoading($button, options);
loader.loading(); // Start the script
loader.remove(); // Stop the script
// no variable
isLoading($button, options).loading(); // Start the script
isLoading($button, options).remove(); // Stop the script
```
### methods
#### #loading
Show the loader
```js
const loader = isLoading($elt, options);
loader.loading();
// or
isLoading($elt, options).loading();
```
#### #remove
Remove the loader
```js
const loader = isLoading($elt, options);
loader.remove();
// or
isLoading($elt, options).remove();
```
### Builds
If you don't use a package manager, you can [access `is-loading` via unpkg (CDN)](https://unpkg.com/is-loading/), download the source, or point your package manager to the url.
`is-loading` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules & [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html) for bundlers that support the `jsnext:main` or `module` field in package.json (Rollup, Webpack 2)
The `is-loading` package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/is-loading/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a [`` tag](https://unpkg.com/is-loading) on your page. The UMD builds make `is-loading` available as a `window.isLoading` global variable.
### License
The code is available under the [MIT](LICENSE) license.
### Contributing
We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.