{"id":22428390,"url":"https://github.com/momsfriendlydevco/loader","last_synced_at":"2025-03-27T06:43:42.407Z","repository":{"id":57127880,"uuid":"60223578","full_name":"MomsFriendlyDevCo/loader","owner":"MomsFriendlyDevCo","description":"Generic page loading control in plain JS + Angular","archived":false,"fork":false,"pushed_at":"2018-11-15T01:41:15.000Z","size":379,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T12:50:55.521Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://momsfriendlydevco.github.io/loader","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/MomsFriendlyDevCo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-02T01:44:49.000Z","updated_at":"2018-11-15T01:41:17.000Z","dependencies_parsed_at":"2022-09-09T17:11:54.705Z","dependency_job_id":null,"html_url":"https://github.com/MomsFriendlyDevCo/loader","commit_stats":null,"previous_names":["momsfriendlydevco/angular-ui-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Floader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Floader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Floader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MomsFriendlyDevCo%2Floader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MomsFriendlyDevCo","download_url":"https://codeload.github.com/MomsFriendlyDevCo/loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245798538,"owners_count":20673901,"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":[],"created_at":"2024-12-05T20:14:41.549Z","updated_at":"2025-03-27T06:43:42.388Z","avatar_url":"https://github.com/MomsFriendlyDevCo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"@momsfriendlydevco/loader\n=========================\nGeneric page loading control in plain JS / Angular / Vue, designed to be as small as possible.\n\nThis module ships with an Angular wrapper (`$loader`) but can be addressed either as `$loader` (Angular) or `Loader` (vanilla JavaScript).\n\n\n[Demo available here](http://momsfriendlydevco.github.io/loader)\n\n\nThis component was built by the really cool guys at [Moms Friendly Development Company](http://mfdc.biz).\n\n\n\n```javascript\nLoader.start('doing-something');\n\n// Do something complicated\n\nLoader.stop('doing-something');\n```\n\nOr mix up foreground + background loading:\n\n```javascript\nLoader.start('doing-something-foreground');\nLoader.startBackground('doing-something-background');\n\n// Do something complicated\n\nLoader.stop('doing-something-foreground');\n\n// Much later...\n\nLoader.stop('doing-something-background');\n```\n\nInstallation\n============\n\nVanilla JavaScript + Core install\n---------------------------------\n\n* Install the library with `npm i --save @momsfriendlydevco/angular-ui-loader`\n\n* Include the `dist/loader.css` and `dist/loader.js` files as high as possible within your `\u003chead/\u003e` element:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/@momsfriendlydevco/angular-ui-loader/dist/loader.css\"/\u003e\n\u003cscript src=\"node_modules/@momsfriendlydevco/angular-ui-loader/dist/loader.js\"\u003e\u003c/script\u003e\n```\n\n\nAngular install (optional)\n--------------------------\n\n* Install the core files as above\n\n* Include the `dist/ng-loader.js` after the main Angular module has loaded:\n\n```html\n\u003cscript src=\"node_modules/@momsfriendlydevco/angular-ui-loader/dist/ng-loader.js\"\u003e\u003c/script\u003e\n```\n\n* Add the `angular-ui-loader` module into the `angular.app()` call:\n\n```javascript\nvar app = angular.module(\"app\", [\n\t'angular-ui-loader',\n]);\n```\n\n* You should now have access to the `$loader` service which exposes the [Loader API](#api).\n\n\nSee the [demo HTML file](demo/index.html) for an example file layout.\n\n\nVue install (optional)\n----------------------\n\n```javascript\nimport $loader from '@momsfriendlydevco/loader/dist/vue-loader.js';\nVue.use($loader);\n```\n\n\n\n\nAPI\n===\n\nLoader.loading\n--------------\nBoolean indicating if we are doing any loading.\n\nLoader.loadingBackground\n------------------------\nBoolean indicating if we are doing any background loading.\n\nLoader.loadingForeground\n------------------------\nBoolean indicating if we are doing any foreground loading.\n\nLoader.isActive()\n-----------------\nReturns true if the loader is active for either foreground or background loading.\n\nLoader.isForeground()\n---------------------\nReturns true if the loader is loading in the foreground.\n\nLoader.isBackground()\n---------------------\nReturns true if the loader is loading in the background.\n\nLoader.start([id='default'], [foreground=true])\n--------------------------------\nAdd an ID to the loader process. If foreground is truthy (the default) it will be treated as a foreground process, if falsy it will be treated as a background process.\n\nLoader.startBackground([id='default'])\n--------------------------------------\nConvenience function to register a process in the background.\nThis function is the same as `Loader.start(id, false)`.\n\nLoader.stop([id='default'])\n---------------------------\nRelease an ID from loading.\n\nLoader.clear()\n--------------\nClear all ID's from loading.\n\nThere is more functionality to tweak inside the [JavaScript](src/loader.js) file. See its internal documentation for details.\n\n\nAngular API\n===========\nIn al cases the Angular API mirrors the regular API with the exception that the class is instanciated as `$loader`:\n\n```javascript\nangular\n.module('app')\n.component('myComponent', {\n\tcontroller: function($loader) {\n\n\t\t// Start the load indicator\n\t\t$loader.start($scope.$id);\n\n\t\t// Do something complicated\n\t\tSomePromise\n\t\t\t.then(data =\u003e {})\n\t\t\t.finally(()=\u003e $loader.stop($scope.$id))\n\t},\n});\n```\n\n\nCSS classes\n===========\nThe base CSS of this component supports the following CSS classes:\n\n| CSS Class                    | Applied When        | Description                                                                                                       |\n|------------------------------|---------------------|-------------------------------------------------------------------------------------------------------------------|\n| `loading`                    | Loading             | Applied to the `body` element during any loading operation                                                        |\n| `loading-foreground`         | Foreground loading  | Applied to the `body` element during a foreground loading operation                                               |\n| `loading-foreground-closing` | Foreground load end | Applied temporarily to the `body` element to run any CSS animations to close out foreground loading               |\n| `loading-background`         | Background loading  | Applied to the `body` element during a background loading operation                                               |\n| `loading-background-closing` | Background load end | Applied temporarily to the `body` element to run any CSS animations to close out background loading               |\n| `hidden-loading`             | Loading             | Utility class which sets `display:none` to any element it is applied to when the page is in any loading operation |\n| `hidden-loading-background`  | Background loading  | As above but only for background loading events                                                                   |\n| `hidden-loading-foreground`  | Foreground loading  | As above but only for foreground loading events                                                                   |\n| `visible-loading`            | Finished loading    | Utility class which sets items as visible when the page has finished any loading operation                        |\n| `visible-loading-background` | Background loading  | As above but for background loading events                                                                        |\n| `visible-loading-foreground` | Foreground loading  | As above but for foreground loading events                                                                        |\n\n\n**NOTES:**\n\n* Foreground and Background loading events are mutually exclusive. A `body` element will not have `loading-foreground` and `loading-background` applied at the same time.\n* There are no \"loaded\" styles. If you want this behaviour use `not(body.loading)` instead.\n* The module applies the `.loading-(foreground|background)-closing` style temporarily (default is 1s) to allow closing CSS transitions. The main `loading-(foreground|background)` style does *not* remain attached, if you wish for the element to remain visible you will have to add an override for visibility for the `loading-*-closing` styles. See the [stylesheet](src/loader.css) for examples.\n\n\nAngular Events\n==============\nWhen using Angular the following events are also emitted via the `$rootScope.$broadcast()` function:\n\n\n| Event                | Parameters | Description                                    |\n|----------------------|------------|------------------------------------------------|\n| `$loaderStart`       | `(id)`     | Emitted when a specific start request is fired |\n| `$loaderStop`        | `(id)`     | Emitted when a specific stop request is fired  |\n| `$loaderStopAll`     | `()`       | Emitted when all loaders have stopped          |\n| `$loaderUpdateState` | `(states)` | Emitted when we update the loading state. `states` is an object with three boolean properties: `loading`, `foreground`, `background` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmomsfriendlydevco%2Floader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmomsfriendlydevco%2Floader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmomsfriendlydevco%2Floader/lists"}