{"id":13596407,"url":"https://github.com/hekigan/is-loading","last_synced_at":"2025-04-04T18:07:07.754Z","repository":{"id":7974091,"uuid":"9375529","full_name":"hekigan/is-loading","owner":"hekigan","description":"Simple library to show visual feedback when loading data or any action that would take time","archived":false,"fork":false,"pushed_at":"2022-12-06T22:16:54.000Z","size":683,"stargazers_count":223,"open_issues_count":28,"forks_count":101,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-28T17:08:21.669Z","etag":null,"topics":["is-loading","loader","loading","overlay"],"latest_commit_sha":null,"homepage":"http://hekigan.github.io/is-loading/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hekigan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-11T16:57:48.000Z","updated_at":"2025-02-15T20:13:43.000Z","dependencies_parsed_at":"2022-07-29T11:19:48.038Z","dependency_job_id":null,"html_url":"https://github.com/hekigan/is-loading","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hekigan%2Fis-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hekigan%2Fis-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hekigan%2Fis-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hekigan%2Fis-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hekigan","download_url":"https://codeload.github.com/hekigan/is-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226213,"owners_count":20904465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["is-loading","loader","loading","overlay"],"created_at":"2024-08-01T16:02:24.652Z","updated_at":"2025-04-04T18:07:07.731Z","avatar_url":"https://github.com/hekigan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# is-loading\n\n![Node](https://img.shields.io/node/v/is-loading.svg?style=flat-square)\n[![NPM](https://img.shields.io/npm/v/is-loading.svg?style=flat-square)](https://www.npmjs.com/package/is-loading)\n[![Travis](https://img.shields.io/travis/hekigan/is-loading/master.svg?style=flat-square)](https://travis-ci.org/hekigan/is-loading)\n[![David](https://img.shields.io/david/hekigan/is-loading.svg?style=flat-square)](https://david-dm.org/hekigan/is-loading)\n[![Coverage Status](https://img.shields.io/coveralls/hekigan/is-loading.svg?style=flat-square)](https://coveralls.io/github/hekigan/is-loading)\n![Downloads](https://img.shields.io/npm/dm/is-loading.svg)\n\n[![NPM](https://nodei.co/npm/is-loading.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/is-loading/)\n\n\u003e Simple script to show visual feedback when loading data or any action that would take time.\n\u003e Vanilla script built with ES2015.\n\u003e Exported as CommonJS, ES2015 and UMD. So it should work everywhere.\n\n### Usage\n\nVanilla javascript\n\n```js\nimport isLoading from 'is-loading';\n\n```\n\n### Examples and Demo\n\nhttp://hekigan.github.io/is-loading/\n\n### Installation\n\nInstall via [yarn](https://github.com/yarnpkg/yarn)\n\n\tyarn add is-loading\n\nor npm\n\n\tnpm install is-loading\n\n\n### configuration\n\nYou can pass in extra options as a configuration\n\n*Parameters:*\n\nBy default all modes accept a DOM element as the first parameter, and an `option` object as the second.\n\n```js\nisLoading(targetElement, options);\n```\n\nFull overlay mode is an exception with either *no parameters* or 1 parameter for the `option` object.\n\n```js\nisLoading(options);\n```\n\n```js\nimport isLoading from 'is-loading';\n```\n\n➖ **targetElement** ( DOMElement )\n\u003cbr/\u003e 📝 The first parameter is expected to be a DOMElement.\n\u003cbr/\u003e 💡 example\n\n```js\nimport isLoading from 'is-loading';\n\nconst $elt = document.querySelector('input[type=\"submit\"]');\n\n// Start the script\nisLoading($elt).loading();\n\n// Stop the script\nisLoading($elt).remove();\n```\n➖ **options** ( Object )\n\u003cbr/\u003e 📝 The second parameter is an Object to set options.\n\u003cbr/\u003e 💡 default\n```js\nconst optionsDefault = {\n    'type': 'switch',        // switch | replace | full-overlay | overlay\n    'text': 'loading',       // Text to display in the loader\n    'disableSource': true,   // true | false\n    'disableList': []\n};\n```\n\u003cbr/\u003e 💡 example\n\n```js\nimport isLoading from 'is-loading';\n\n// Assuming that we have a login form\nconst $button = document.querySelector('input[type=\"submit\"]');\nconst $username = document.querySelector('#username');\nconst $password = document.querySelector('#password');\n\noptions = {\n    'type': 'switch',        // switch | replace | full-overlay | overlay\n    'text': 'login...',      // Text to display in the loader\n    'disableSource': true,   // true | false\n    'disableList': [$username, $password]\n};\n\n// using a variable\nconst loader = isLoading($button, options);\nloader.loading(); // Start the script\nloader.remove(); // Stop the script\n\n// no variable\nisLoading($button, options).loading(); // Start the script\nisLoading($button, options).remove(); // Stop the script\n```\n\n### methods\n\n#### #loading\n\nShow the loader\n\n```js\nconst loader = isLoading($elt, options);\nloader.loading();\n\n// or\n\nisLoading($elt, options).loading();\n```\n\n#### #remove\n\nRemove the loader\n\n```js\nconst loader = isLoading($elt, options);\nloader.remove();\n\n// or\n\nisLoading($elt, options).remove();\n```\n\n### Builds\n\nIf 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.\n\n`is-loading` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules \u0026 [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)\n\nThe `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 [`\u003cscript\u003e` tag](https://unpkg.com/is-loading) on your page. The UMD builds make `is-loading` available as a `window.isLoading` global variable.\n\n### License\n\nThe code is available under the [MIT](LICENSE) license.\n\n### Contributing\n\nWe are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhekigan%2Fis-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhekigan%2Fis-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhekigan%2Fis-loading/lists"}