{"id":13808683,"url":"https://github.com/jsdaddy/ngx-loader-indicator","last_synced_at":"2025-04-11T07:22:11.383Z","repository":{"id":32437532,"uuid":"133536022","full_name":"JsDaddy/ngx-loader-indicator","owner":"JsDaddy","description":"Awesome loader for angular applications. No wrappers only you elements","archived":false,"fork":false,"pushed_at":"2024-07-08T13:24:26.000Z","size":11533,"stargazers_count":51,"open_issues_count":3,"forks_count":5,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2024-10-04T03:18:53.596Z","etag":null,"topics":["angular","carousel","loader","loading","loading-spinner","ngx-loader","ngx-spiner","spiner","spinner","typescript","website"],"latest_commit_sha":null,"homepage":"https://jsdaddy.github.io/ngx-loader-indicator/","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/JsDaddy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-15T15:25:38.000Z","updated_at":"2024-07-08T13:23:41.000Z","dependencies_parsed_at":"2023-11-28T16:45:06.760Z","dependency_job_id":"c80514f9-82df-41f8-9d58-56d94be6cf9f","html_url":"https://github.com/JsDaddy/ngx-loader-indicator","commit_stats":{"total_commits":85,"total_committers":11,"mean_commits":"7.7272727272727275","dds":0.6352941176470588,"last_synced_commit":"486785d09de8fb99c6babd55878c4acedddf7511"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsDaddy%2Fngx-loader-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsDaddy%2Fngx-loader-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsDaddy%2Fngx-loader-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsDaddy%2Fngx-loader-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JsDaddy","download_url":"https://codeload.github.com/JsDaddy/ngx-loader-indicator/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232545254,"owners_count":18539624,"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":["angular","carousel","loader","loading","loading-spinner","ngx-loader","ngx-spiner","spiner","spinner","typescript","website"],"created_at":"2024-08-04T01:01:49.136Z","updated_at":"2025-01-05T04:15:02.349Z","avatar_url":"https://github.com/JsDaddy.png","language":"TypeScript","readme":"\u003ca href=\"http://jsdaddy.io/img/logo.png\"\u003e\n  \u003ch1 align=\"center\"\u003eNGX LOADER INDICATOR\u003c/h1\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  NGX LOADER INDICATOR is the best directive to have loader without wrapping your element to additional component\n\u003c/p\u003e\n\n[![CI](https://github.com/JsDaddy/ngx-loader-indicator/actions/workflows/quality-check.yml/badge.svg?branch=develop)](https://github.com/JsDaddy/ngx-loader-indicator/actions/workflows/main.yml)\n[![npm](https://img.shields.io/npm/v/ngx-loader-indicator.svg)](https://www.npmjs.com/package/ngx-loader-indicator)\n[![npm downloads](https://img.shields.io/npm/dt/ngx-loader-indicator.svg)](https://npmjs.org/ngx-loader-indicator)\n\n[![npm](https://img.shields.io/npm/dm/ngx-loader-indicator.svg)](https://www.npmjs.com/package/ngx-loader-indicator)\n\n[![GitHub contributors](https://img.shields.io/github/contributors/JSDaddy/ngx-loader-indicator.svg?style=flat)](https://github.com/JSDaddy/ngx-loader-indicator)\n\n[![GitHub stars](https://img.shields.io/github/stars/JSDaddy/ngx-loader-indicator.svg?label=GitHub%20Stars\u0026style=flat)](https://github.com/JSDaddy/ngx-loader-indicator)\n\nYou can also try our NGX MASK [check](https://www.npmjs.com/package/ngx-mask) it.\nYou can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste) it.\n\n### You can try live [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples.\n\n## Installing\n\n```bash\n$ npm install --save ngx-loader-indicator\n```\n\n## Quickstart if ngx-loader-indicator version \u003e= 15.0.0\n\nPay attention this version works for angular \u003e= 14.0.0\n\nConfigure for application with `provideEnvironmentNgxLoaderIndicator`\n\n```typescript\nbootstrapApplication(AppComponent, {\n    providers: [\n        provideAnimations(),\n        provideEnvironmentNgxLoaderIndicator(),\n        (...)\n    ],\n}).catch((err) =\u003e console.error(err));\n```\n\nor configure for feature with `provideNgxLoaderIndicator` and import standalone directive `NgxLoaderIndicatorDirective`\n\n```typescript\n@Component({\n    selector: 'my-feature',\n    templateUrl: './my-feature.component.html',\n    styleUrls: ['./my-feature.component.css'],\n    standalone: true,\n    imports: [NgxLoaderIndicatorDirective, (...)],\n    providers: [\n        (...)\n        provideNgxLoaderIndicator({\n            img: 'https://avatars2.githubusercontent.com/u/32452610?s=200\u0026v=4',\n            loaderStyles: {\n                background: 'rgba(255, 255, 255, 0.8)',\n            },\n            imgStyles: {\n                width: '50px',\n                background: 'yellow',\n            },\n            rotate: {\n                duration: 5000,\n            },\n        }),\n    ],\n})\nexport class MyFeatureComponent {}\n```\n\n## Quickstart if ngx-loader-indicator version \u003c 15.0.0\n\nPay attention this version works for angular \u003c 12.0.0\n\nImport module in needed module.\n\n```typescript\nimport {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'\n\n(...)\n\n@NgModule({\n  (...)\n  imports: [\n    NgxLoaderIndicatorModule.forRoot(options)\n  ]\n  (...)\n})\n```\n\n### Usage\n\n```html\n\u003cdiv [ngxLoaderIndicator]=\"isLoading\"\u003eContent\u003c/div\u003e\n```\n\n#### Examples\n\n```html\n\u003cform (ngSubmit)=\"save(form.value)\" [formGroup]=\"form\" [ngxLoaderIndicator]=\"isLoading\"\u003e\n    \u003ch2\u003eLogin\u003c/h2\u003e\n    \u003cinput matInput type=\"email\" placeholder=\"Email\" #email formControlName=\"email\" /\u003e\n    \u003cinput matInput type=\"password\" placeholder=\"Password\" #name formControlName=\"password\" /\u003e\n    \u003cbutton mat-button [disabled]=\"form.invalid\"\u003eLogin\u003c/button\u003e\n\u003c/form\u003e\n```\n\n## Options\n\nYou can define your custom options\n\n### custom img (string) and colors\n\n```typescript\n  {\n    img: string,\n    imgStyles: {\n      width: string, // '30px'\n      background: string, // 'yellow' or rgb(255, 255, 0)\n    }\n  }\n```\n\n### custom wrapper layout colors\n\n```typescript\n  {\n    loaderStyles: {\n      background: string,\n    },\n  }\n```\n\n### animations options for image rotation\n\n```typescript\n    rotate: {\n      delay?: number;\n      direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';\n      duration: number\n      easing?: string;\n      endDelay?: number;\n      fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';\n      id?: string;\n      iterationStart?: number;\n      iterations?: number;\n    },\n```\n\n### Usage\n\n```typescript\nimport {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'\n\n(...)\n\n@NgModule({\n  (...)\n  imports: [\n    NgxLoaderIndicatorModule.forRoot({\n      img: 'https://avatars2.githubusercontent.com/u/32452610?s=200\u0026v=4',\n      loaderStyles: {\n        background: 'rgba(255, 255, 255, 0.8)',\n      },\n      imgStyles: {\n        width: '100px',\n        background: 'yellow',\n      },\n      rotate: {\n        duration: 5000\n      },\n    }),\n  ]\n  (...)\n})\n```\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdaddy%2Fngx-loader-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdaddy%2Fngx-loader-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdaddy%2Fngx-loader-indicator/lists"}