{"id":14971234,"url":"https://github.com/maximelafarie/ngx-smart-loader","last_synced_at":"2025-10-17T10:52:26.223Z","repository":{"id":38736380,"uuid":"114992703","full_name":"maximelafarie/ngx-smart-loader","owner":"maximelafarie","description":"Smart loader handler to manage loaders everywhere in Angular apps.","archived":false,"fork":false,"pushed_at":"2022-12-09T08:21:16.000Z","size":2480,"stargazers_count":28,"open_issues_count":40,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-04T04:56:17.068Z","etag":null,"topics":["angular","angular-cli","angular2","angular4","angular5","biig","library","loader","loading","ngx-loader","ngx-smart-loader","npm","npm-package","smart","yarn"],"latest_commit_sha":null,"homepage":"https://maximelafarie.com/ngx-smart-loader","language":"TypeScript","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/maximelafarie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-12-21T10:18:00.000Z","updated_at":"2020-08-26T09:09:23.000Z","dependencies_parsed_at":"2023-01-25T19:31:29.283Z","dependency_job_id":null,"html_url":"https://github.com/maximelafarie/ngx-smart-loader","commit_stats":null,"previous_names":["biig-io/ngx-smart-loader"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/maximelafarie/ngx-smart-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-smart-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-smart-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-smart-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-smart-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximelafarie","download_url":"https://codeload.github.com/maximelafarie/ngx-smart-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximelafarie%2Fngx-smart-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278266893,"owners_count":25958733,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","angular-cli","angular2","angular4","angular5","biig","library","loader","loading","ngx-loader","ngx-smart-loader","npm","npm-package","smart","yarn"],"created_at":"2024-09-24T13:44:54.100Z","updated_at":"2025-10-04T04:56:21.133Z","avatar_url":"https://github.com/maximelafarie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ngx-smart-loader](src/assets/banner.jpg)\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/maximelafarie/ngx-smart-loader.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/maximelafarie/ngx-smart-loader.svg?branch=master)](https://travis-ci.org/maximelafarie/ngx-smart-loader) [![npm version](https://badge.fury.io/js/ngx-smart-loader.svg)](https://badge.fury.io/js/ngx-smart-loader) [![npm downloads](https://img.shields.io/npm/dm/ngx-smart-loader.svg)](https://npmjs.org/ngx-smart-loader) \n[![codecov](https://codecov.io/gh/maximelafarie/ngx-smart-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/maximelafarie/ngx-smart-loader) \n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/4106ddd7050148ad98c0843c9c6800f0)](https://www.codacy.com/app/maximelafarie/ngx-smart-loader?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=maximelafarie/ngx-smart-loader\u0026amp;utm_campaign=Badge_Grade)\n\n`ngx-smart-loader` is a lightweight and very complete Angular component for managing loaders inside any Angular project. It was built for modern browsers using TypeScript, HTML5 and Angular \u003e=2.0.0.\n\n## Demo\nhttps://maximelafarie.com/ngx-smart-loader/\n\n\n## Powerful and so easy to use! 🤙\nManaging loaders has always been a big deal, mostly if you want to manage several loaders at the same time. With this library, it has never been so easy to do: a complete API to manage absolutely everything in your app.\n\n`ngx-smart-loader` also comes with a fancy default loader (demo default page's loader) in case you don't want to add your own.\n\nCheck out the [documentation](https://maximelafarie.com/ngx-smart-loader) \u0026 [demos](https://maximelafarie.com/ngx-smart-loader/) for more information and tutorials!\n\nSee the [changelog](https://maximelafarie.com/ngx-smart-loader/blob/master/src/ngx-smart-loader/CHANGELOG.md) for recent changes.\n\n## Features\n - Handle large quantity of loaders anywhere in your app\n - Customize the style of your loaders through custom CSS classes\n - No external CSS library is used so you can easily add yours\n - Manipulate groups of loader at the same time\n - Events on `start` and `stop` for each loader\n - Manage all your loaders stack with very fast methods\n - Very smart `z-index` computation\n - Check for loader(s) activity\n - AoT compilation support\n\n## Setup\nTo use `ngx-smart-loader` in your project install it via [npm](https://www.npmjs.com/package/ngx-smart-loader):\n```\nnpm i ngx-smart-loader --save\n```\nor\n```\nyarn add ngx-smart-loader\n```\n\nThen add `NgxSmartLoaderModule` (with `.forRoot()` or `.forChild()` depending if the module which you import the library into is the main module of your project or a nested module) and `NgxSmartLoaderService` to your project's `NgModule`\n```js\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { NgxSmartLoaderModule, NgxSmartLoaderService } from 'ngx-smart-loader';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxSmartLoaderModule.forRoot()\n  ],\n  providers: [ NgxSmartLoaderService ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\nAnd import `ngx-smart-loader.scss` or `ngx-smart-loader.css` in a global style file (e.g. `styles.scss` or `styles.css` in classic Angular projects or any other scss/css file it imports):\nExample with **styles.scss**:\n```css\n/* You can add global styles to this file, and also import other style files */\n@import \"~ngx-smart-loader/ngx-smart-loader\";\n@import \"app/app.component\";\n...\n```\n\n## Parameters / Options\n`ngx-smart-loader` comes with some parameters / options in order to make it fit your needs. The following parameters / options needs to be used like this: `\u003cngx-smart-loader [parameter-or-option-name]=\"value\"\u003e\u003c/ngx-smart-loader\u003e`\n\nThe below documentation will use the following pattern: \n\u003e `parameter/option name` (type) | default value | required? ― _description_\n\n- `identifier` (string) | `undefined` | **REQUIRED** ― _The identifiant of the loader instance. Retrieve a loader easily by its identifier._\n\n- `force` (boolean) | false ― _If true and if you declare another loader instance with the same identifier that another, the service will override it by the new you declare in the loader stack. By default, it allows you to declare multiple loaders with same identifier in order to manipulate them at once._\n\n- `customClass` (string) | `''` ― _All the additional classes you want to add to the loader (e.g.: for your custom loaders). You can add several classes by giving a string with space-separated classnames_\n\n- `delayIn` (number) | `0` ― _In milliseconds. Define the time after which you want to display your loader. The `.active` class only append to loader after this time. The `.enter` class append to the loader instantly and disappears after this delay._\n\n- `delayOut` (number) | `0` ― _In milliseconds. Define the time after which you want to hide your loader. The `.active` class only disappears from the loader after this time. The `.leave` class append to the loader instantly and disappears after this delay._\n\n## Manipulate loaders\nFirst, you need to add a loader to any template at any level in your app (all examples will use the default library built-in loader).\n```html\n\u003cngx-smart-loader identifier=\"myLoader\"\u003e\n  \u003cdiv class=\"loader\"\u003e\n    \u003cdiv class=\"circle\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ngx-smart-loader\u003e\n```\nAt this point, the loader instance is stored in the `NgxSmartLoaderService`. You can do absolutely what you want with it, anywhere in your app. For example, from a component (here we're starting the loader automatically after one second):\n```js\nimport { Component, OnInit } from '@angular/core';\n\nimport { NgxSmartLoaderService } from 'ngx-smart-loader';\n\n@Component({\n  ...\n})\nexport class HomeComponent implements OnInit {\n\n  constructor(public loader: NgxSmartLoaderService) {\n  }\n\n  ngOnInit() {\n    this.loader.start('myLoader');\n  }\n}\n```\n\n## Http calls\nFollowing the same example as above, you can use the `NgxSmartLoaderService` to start a loader. Here's a more concrete example:\n\nLet's imagine you have a function that makes an Http request to retrieve a user list (this example uses the [rxjs Observable](https://github.com/ReactiveX/rxjs/blob/master/doc/observable.md). This is an example, you need to adapt it to your needs):\n```js\npublic users: User[] = [];\n\ngetUsers (): User[] {\n  this.loader.start('myLoader');\n  return this.http.get\u003cUser[]\u003e('api/v2/users')\n    .subscribe(\n      users =\u003e this.users = users,\n      err =\u003e console.error('something wrong occurred: ' + err),\n      () =\u003e this.loader.stop('myLoader');\n    );\n}\n```\nAs you can see above, we're starting the loader before Http request. Then in the `subscribe()` we're stopping when the request finished.\n\n## Handle events\n`ngx-smart-loader` comes with built-in events: `onStart`, `onStop` and `onVisibleChange`.\n\n - `onStart`: loader has been opened\n - `onStop`: loader has been closed\n - `onVisibleChange`: loader has been opened or closed\n\nYou can handle events directly from the view...\n```html\n\u003cngx-smart-loader identifier=\"myLoader\" (onStart)=\"onStart($event)\" (onStop)=\"onStop($event)\" (onVisibleChange)=\"onVisibleChange($event)\"\u003e\n  \u003cdiv class=\"loader\"\u003e\n    \u003cdiv class=\"circle\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ngx-smart-loader\u003e\n```\n...and execute component functions:\n```js\n@Component({\n  ...\n})\nexport class AppComponent {\n  constructor() {\n  }\n\n  public onStart(event) {\n  }\n\n  public onStop(event) {\n  }\n\n  public onVisibleChange(event) {\n  }\n}\n```\n\n## Contribute\nFirstly fork this repo, then clone it and go inside the root of the freshly forked project.\n`ng serve` to start the angular-cli demo.\nTo modify the package, go into `./src/ngx-smart-loader` and do some code! 🤓\nWhen you finished commit and push it to your fork repo, make a PR!\nThank you for your support, you rock! 🤘🎸\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximelafarie%2Fngx-smart-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximelafarie%2Fngx-smart-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximelafarie%2Fngx-smart-loader/lists"}