{"id":13497345,"url":"https://github.com/amitmahida92/ng4-loading-spinner","last_synced_at":"2025-05-06T23:46:52.628Z","repository":{"id":57235205,"uuid":"98619172","full_name":"amitmahida92/ng4-loading-spinner","owner":"amitmahida92","description":"Angular 4 custom async loading spinner.","archived":false,"fork":false,"pushed_at":"2019-04-20T07:17:23.000Z","size":405,"stargazers_count":69,"open_issues_count":16,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T04:12:05.106Z","etag":null,"topics":["angular","angular-2","angular-loading","angular-loading-bar","angular-loading-spinner","angular4","loading-bar","loading-spinner","ng4-loading-spinner","spinner"],"latest_commit_sha":null,"homepage":null,"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/amitmahida92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-28T07:00:27.000Z","updated_at":"2023-09-20T16:57:19.000Z","dependencies_parsed_at":"2022-09-04T21:20:38.416Z","dependency_job_id":null,"html_url":"https://github.com/amitmahida92/ng4-loading-spinner","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitmahida92%2Fng4-loading-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitmahida92%2Fng4-loading-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitmahida92%2Fng4-loading-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitmahida92%2Fng4-loading-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amitmahida92","download_url":"https://codeload.github.com/amitmahida92/ng4-loading-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788409,"owners_count":21804282,"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","angular-2","angular-loading","angular-loading-bar","angular-loading-spinner","angular4","loading-bar","loading-spinner","ng4-loading-spinner","spinner"],"created_at":"2024-07-31T20:00:29.265Z","updated_at":"2025-05-06T23:46:52.614Z","avatar_url":"https://github.com/amitmahida92.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ng4-loading-spinner\n\nAngular 4/5/6/7 custom async loading spinner with two simple methods for your asychronous calls.\nCustom loading template \u0026 loading text inputs are also available.\n\n[![support](https://img.shields.io/badge/Support-Angular%206.x-brightgreen.svg)](https://angular.io/docs)\n[![support](https://img.shields.io/badge/Support-Angular%205.x-brightgreen.svg)](https://angular.io/docs)\n[![support](https://img.shields.io/badge/Support-Angular%204.x-brightgreen.svg)](https://v4.angular.io/docs)\n[![David](https://img.shields.io/david/peer/webcomponents/generator-element.svg)]()\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n\n\n\u003e [ Docs Link ](https://amitmahida92.github.io/ng4-loading-spinner)\n\n\u003e [Link to ng4-loading-spinner](https://www.npmjs.com/package/ng4-loading-spinner)\n\n## Default Spinner Example\n\n[Open Plunker](https://plnkr.co/edit/I3MoLhxz1NO9PVtMTiaH?p=preview)\n\n## Custom Template Example\n\n[Open Plunker](https://plnkr.co/edit/gX8uvP2hb7DiE8Hs0a1R?p=preview)\n\n## Installation\n\n`npm i ng4-loading-spinner --save`\n\n## Description\n\n\u003e *You can override the css for your customized spinner.*\n\n\u003e *You can also configure your own threshold to show spinner only for more expensive processes!*\n\n\u003e *Supports latest Angular v5.x*\n\n\u003e *Supports latest Angular v6.x*\n\n\u003e *Supports latest Angular v7.x*\n\n\u003e *Supports latest Angular cli v1.5.x*\n\n\u003e *Supports latest Angular cli v6.x*\n\n\u003e *Supports latest Angular cli v7.x*\n\n## New Updates\n\n\u003e *`#loading-spinner-text / .loading-spinner-text` : Both id and class attributes given to spinner text component to customize the loading text css*\n\n\u003e *[timeout] The time after which spinner will be hidden. Default is 5000 ms*\n\n\u003e Resolved issues related to templates and loading text.\n\n## Usage\n\n\u003e Import module to your application master module\n\n```javascript\nimport { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';\n```\n\n\u003e Make an import entry as shown below\n\n```javascript\n\nimports: [ Ng4LoadingSpinnerModule.forRoot() ]\n\n```\n\n\u003e Include spinner component to your root level component.\n\n```html\n\n\u003cng4-loading-spinner\u003e \u003c/ng4-loading-spinner\u003e\n\n```\n\n\u003e Import `Ng4LoadingSpinnerService` to the component where you want to show the spinner.\n\n```javascript\n\nimport { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';\n\n```\n\n\u003e Inject dependancy\n\n```javascript\n\n    constructor(\n        private spinnerService: Ng4LoadingSpinnerService\n    ) { }\n\n```\n\n\u003e Use `show()` method to display the loading spinner.\n\n```javascript\n\nthis.spinnerService.show();\n\n```\n\n\u003e Use `hide()` method to hide the loading spinner once the processing is done.\n\n```javascript\n\nthis.spinnerService.hide();\n\n```\n\n## Example\n\n```javascript\n\n    this.spinnerService.show();\n    this.http.get(GLOBAL['CONFIG_URL'])\n        .subscribe(data =\u003e {\n            this.spinnerService.hide();\n        });\n\n```\n\n## Custom template\n\n\u003e *[template]* : Accepts HTML which generates the loading spinner. You can apply additional css to design your own spinner, or can just pass *.gif image to show the loading spinner.\n\n\u003e *[loadingText]* : Accepts a string to display the text while the loading process.\n\n\u003e *[zIndex]* : Accepts a z-index css property for loading text.\n\n\u003e *[threshold]* : Accepts time in milliseconds for threshold through which you can conditionally show the spinner only for expensive calls. *Default is 500 ms.*\n\n\u003e *[timeout]* : Accepts time in milliseconds to hide the spinner automatically. *Default is 5000 ms.*\n\n\u003e default *[loadingText]* text would be blank.\n\n\u003e app.component.html : both are optional if not provided default would be shown.        \n\n```html\n\n\u003cng4-loading-spinner [threshold]=\"2000\" [timeout]=\"4000\" [template]=\"template\" [loadingText]=\"'Please wait...'\" [zIndex]=\"9999\"\u003e\u003c/ng4-loading-spinner\u003e\n\n```\n\n\u003e [threshold]=\"2000\" : This will show the loading bar for the only processes which will take time more 2 secs.\n\n\u003e app.component.ts\n\n```javascript\n\ntemplate: string =`\u003cimg src=\"http://pa1.narvii.com/5722/2c617cd9674417d272084884b61e4bb7dd5f0b15_hq.gif\" /\u003e`\n\n```\n\n## License\n\nMIT © [Amit Mahida](mailto:amit.mahida9292@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitmahida92%2Fng4-loading-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famitmahida92%2Fng4-loading-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitmahida92%2Fng4-loading-spinner/lists"}