├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
├── ISSUE_TEMPLATE.md
└── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .release.json
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── config
├── webpack.config.dev.js
└── webpack.config.prod.js
├── css
├── index.css
└── index.min.css
├── example
├── example.scss
├── sample.bundle.js
└── sample.js
├── index.html
├── package.json
├── postcss.config.js
├── rollup.config.js
├── src
├── css
│ └── index.scss
└── index.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["es2015", {"modules": false}],
4 | "stage-2"
5 | ],
6 | "env": {
7 | "test": {
8 | "presets": [
9 | ["es2015", {"loose": true}],
10 | "stage-2"
11 | ],
12 | "plugins": [
13 | ["add-module-exports", "transform-object-rest-spread"]
14 | ]
15 | },
16 | "cjs": {
17 | "presets": [
18 | ["es2015", {"loose": true}],
19 | "stage-2"
20 | ],
21 | "plugins": [
22 | ["add-module-exports", "transform-object-rest-spread"]
23 | ]
24 | },
25 | "es": {
26 | "presets": [
27 | ["es2015", {"loose": true, "modules": false}],
28 | "stage-2"
29 | ]
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 4
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | cjs
2 | es
3 | dist
4 | coverage
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "standard-extended"
3 | }
4 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | **Do you want to request a feature or report a bug?**
2 |
3 |
4 |
5 | **Feature:**
6 |
7 | **If this is a feature request, what is motivation or use case for changing the behavior?**:
8 |
9 | **Bug:**
10 |
11 | **What is the current behavior?**:
12 |
13 | **What is the expected behavior?**:
14 |
15 | **Please provide the steps to reproduce or a link (repository) to a [Short, Self Contained, Correct (Compilable), Example (SSCE)](http://sscce.org/)**:
16 |
17 | **Please mention other relevant information**:
18 |
19 | **Browser Version:
20 |
Node.js Version:
21 |
Operating System:**
22 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | **What kind of change does this PR introduce?**:
2 |
3 | **Did you add tests for your changes?**:
4 |
5 | **Summary**:
6 |
7 | **Does this PR introduce a breaking change?**:
8 |
9 | **Other**:
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | es
2 | cjs
3 | dist
4 | node_modules
5 | coverage
6 | *.log
7 |
--------------------------------------------------------------------------------
/.release.json:
--------------------------------------------------------------------------------
1 | {
2 | "commitMessage": ":bookmark: v%s",
3 | "tagName": "v%s",
4 | "prereleaseId": "beta",
5 | "tagAnnotation": "Version %s",
6 | "changelogCommand": "git log --pretty=format:'* %s (%h)' v[REV_RANGE]"
7 | }
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "4"
4 | - "5"
5 | - "6"
6 | - "7"
7 | script:
8 | - npm run lint:test
9 | cache:
10 | yarn: true
11 | directories:
12 | - node_modules
13 | after_success: 'npm run coveralls'
14 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to 'is-loading'
2 |
3 | ## Support / Questions
4 |
5 | For **support or usage questions** like "How do I do X with is-loading." and "My code doesn't work.", please search and ask on **StackOverflow** with a **'is-loading' tag** first.
6 |
7 | ## Bugs
8 |
9 | > The ideal GitHub issue (and even some feature requests) is not an issue, it's a PR with a failing test case.
10 |
[@rauchg](https://twitter.com/rauchg/status/810589655532007424)
11 |
12 | **Before filing an issue please [search the issue tracker](https://github.com/hekigan/is-loading/issues); your issue may have already been discussed or fixed in `master`.**
13 |
14 | **If you want your issue to get priority, submit it as a PR instead**
15 |
16 | **Fill in the template** provided by the issue tracker, try to be as **clear** and **complete** as possible, providing a **[Short, Self Contained, Correct (Compilable), Example (SSCE)](http://sscce.org/)** (**link** to a **repository**) helps a lot .
17 |
18 | ## Feature / Enhancement Requests
19 |
20 | Feature or enhancement requests should be **submitted** in the
21 | [issue tracker](https://github.com/hekigan/is-loading/issues), with a **description** (follow the template) of the expected behavior & use case, where they’ll remain until **approval** by the **lead maintainer(s) and/or enough interest** from the **community**.
22 |
23 | You can **request** a feature by **writing a pull request**, but this is **no guarantee** it will be **merged**.
24 |
25 | ## 'help wanted' label
26 |
27 | There are issues marked with the **['help wanted'](https://github.com/hekigan/is-loading/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)** label.
This is a perfect start if you want to help out with the further development of is-loading.
28 |
29 | ## Pull Requests (PR)
30 |
31 | In general, the contribution workflow looks like this:
32 |
33 | 1. **Fork** the repo.
34 | 2. **Clone** the repo. `git clone https://github.com/your-username/is-loading.git`.
35 | 3. Create a **new branch** based off the master branch, provide a **descriptive name**
(ex. '**feat**-add-better-logging', '**bug**-removed-double-method', '**enh**-bumped-eslint')
36 | 4. Before running the code you’ll need to **install** the **dependencies** (`npm install` or `yarn`).
37 | 5. **Implement** your feature / bugfix (using the **watch scripts**), you should **only need to modify `/src`**. Don’t worry about regenerating the build folders (`/cjs`, `/es`, `/dist`), they are **built** in the **prepublish** phase.
38 | 6. Make sure **all tests pass**, **coverage is 100%** and there are **no linting errors**.
39 | 7. Submit a **PR**, referencing what it addresses.
40 | 8. Please try to keep your **PR focused in scope and avoid including unrelated commits**.
41 |
42 | After you have submitted your PR, we'll try to **get back to you as soon as possible**.
We will **review** your PR and might **request changes**.
43 |
44 | ## Development / Watch mode
45 |
46 | You can **run the watch scripts**
47 |
48 | ```console
49 | npm run build:watch
50 | ```
51 |
52 | and
53 |
54 | ```console
55 | npm run test:watch
56 | ```
57 |
58 | to make development easier.
59 |
60 | ## Coding Guidelines
61 |
62 | Please **follow** the **conventions** already established in the code.
63 |
64 | Guidelines are enforced using **[ESLint](http://eslint.org/)**.
65 |
66 |
67 | You can **run the linting script** by using
68 |
69 | ```console
70 | $ npm run lint
71 | ```
72 |
73 |
74 | ## Testing
75 |
76 | Include updated (or add new) tests in the `__tests__` directory as part of your PR.
77 |
78 | You can **run the test script** by using
79 |
80 | ```console
81 | $ npm run test
82 | ```
83 |
84 | or with coverage
85 |
86 | ```console
87 | $ npm run test:coverage
88 | ```
89 |
90 | Aim for **100% [coverage](https://en.wikipedia.org/wiki/Code_coverage)**.
91 |
92 | ## Hooks
93 |
94 | We added **pre-commit** and **pre-push** **hooks** to make sure you **don't commit non-working code.**
95 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Laurent Blanes
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # is-loading
2 |
3 | 
4 | [](https://www.npmjs.com/package/is-loading)
5 | [](https://travis-ci.org/hekigan/is-loading)
6 | [](https://david-dm.org/hekigan/is-loading)
7 | [](https://coveralls.io/github/hekigan/is-loading)
8 | 
9 |
10 | [](https://nodei.co/npm/is-loading/)
11 |
12 | > Simple script to show visual feedback when loading data or any action that would take time.
13 | > Vanilla script built with ES2015.
14 | > Exported as CommonJS, ES2015 and UMD. So it should work everywhere.
15 |
16 | ### Usage
17 |
18 | Vanilla javascript
19 |
20 | ```js
21 | import isLoading from 'is-loading';
22 |
23 | ```
24 |
25 | ### Examples and Demo
26 |
27 | http://hekigan.github.io/is-loading/
28 |
29 | ### Installation
30 |
31 | Install via [yarn](https://github.com/yarnpkg/yarn)
32 |
33 | yarn add is-loading
34 |
35 | or npm
36 |
37 | npm install is-loading
38 |
39 |
40 | ### configuration
41 |
42 | You can pass in extra options as a configuration
43 |
44 | *Parameters:*
45 |
46 | By default all modes accept a DOM element as the first parameter, and an `option` object as the second.
47 |
48 | ```js
49 | isLoading(targetElement, options);
50 | ```
51 |
52 | Full overlay mode is an exception with either *no parameters* or 1 parameter for the `option` object.
53 |
54 | ```js
55 | isLoading(options);
56 | ```
57 |
58 | ```js
59 | import isLoading from 'is-loading';
60 | ```
61 |
62 | ➖ **targetElement** ( DOMElement )
63 |
📝 The first parameter is expected to be a DOMElement.
64 |
💡 example
65 |
66 | ```js
67 | import isLoading from 'is-loading';
68 |
69 | const $elt = document.querySelector('input[type="submit"]');
70 |
71 | // Start the script
72 | isLoading($elt).loading();
73 |
74 | // Stop the script
75 | isLoading($elt).remove();
76 | ```
77 | ➖ **options** ( Object )
78 |
📝 The second parameter is an Object to set options.
79 |
💡 default
80 | ```js
81 | const optionsDefault = {
82 | 'type': 'switch', // switch | replace | full-overlay | overlay
83 | 'text': 'loading', // Text to display in the loader
84 | 'disableSource': true, // true | false
85 | 'disableList': []
86 | };
87 | ```
88 |
💡 example
89 |
90 | ```js
91 | import isLoading from 'is-loading';
92 |
93 | // Assuming that we have a login form
94 | const $button = document.querySelector('input[type="submit"]');
95 | const $username = document.querySelector('#username');
96 | const $password = document.querySelector('#password');
97 |
98 | options = {
99 | 'type': 'switch', // switch | replace | full-overlay | overlay
100 | 'text': 'login...', // Text to display in the loader
101 | 'disableSource': true, // true | false
102 | 'disableList': [$username, $password]
103 | };
104 |
105 | // using a variable
106 | const loader = isLoading($button, options);
107 | loader.loading(); // Start the script
108 | loader.remove(); // Stop the script
109 |
110 | // no variable
111 | isLoading($button, options).loading(); // Start the script
112 | isLoading($button, options).remove(); // Stop the script
113 | ```
114 |
115 | ### methods
116 |
117 | #### #loading
118 |
119 | Show the loader
120 |
121 | ```js
122 | const loader = isLoading($elt, options);
123 | loader.loading();
124 |
125 | // or
126 |
127 | isLoading($elt, options).loading();
128 | ```
129 |
130 | #### #remove
131 |
132 | Remove the loader
133 |
134 | ```js
135 | const loader = isLoading($elt, options);
136 | loader.remove();
137 |
138 | // or
139 |
140 | isLoading($elt, options).remove();
141 | ```
142 |
143 | ### Builds
144 |
145 | 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.
146 |
147 | `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)
148 |
149 | 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 [`
466 |
467 |