{"id":13480799,"url":"https://github.com/akserg/ng2-slim-loading-bar","last_synced_at":"2025-04-12T21:34:54.925Z","repository":{"id":57264429,"uuid":"55319297","full_name":"akserg/ng2-slim-loading-bar","owner":"akserg","description":"Angular 2 component shows slim loading bar at the top of the page.","archived":false,"fork":false,"pushed_at":"2019-12-30T07:52:02.000Z","size":128,"stargazers_count":358,"open_issues_count":26,"forks_count":91,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-10T18:01:11.021Z","etag":null,"topics":["angular","bar","loading","progress","progress-bar"],"latest_commit_sha":null,"homepage":"","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/akserg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/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":"2016-04-02T22:33:21.000Z","updated_at":"2024-11-27T09:07:02.000Z","dependencies_parsed_at":"2022-09-10T22:52:08.680Z","dependency_job_id":null,"html_url":"https://github.com/akserg/ng2-slim-loading-bar","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-slim-loading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-slim-loading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-slim-loading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-slim-loading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akserg","download_url":"https://codeload.github.com/akserg/ng2-slim-loading-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637187,"owners_count":21137530,"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","bar","loading","progress","progress-bar"],"created_at":"2024-07-31T17:00:45.141Z","updated_at":"2025-04-12T21:34:54.878Z","avatar_url":"https://github.com/akserg.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","UI Components","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","TypeScript"],"sub_categories":["Uncategorized","Loader","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# Angular 2 Slim Loading Bar [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)\nAngular2 component shows slim loading bar at the top of the page of your application.\n\n[![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)\n[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n[![Known Vulnerabilities](https://snyk.io/test/github/akserg/ng2-slim-loading-bar/badge.svg)](https://snyk.io/test/github/akserg/ng2-slim-loading-bar)\n\nFollow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social\u0026label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.\n\n_Some of these APIs and Components are not final and are subject to change!_\n\n## Installation\n\n```sh\nnpm install ng2-slim-loading-bar --save\n```\n\n## Demo\nSimple examples using ng2-slim-loading-bar:\n- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\n- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\n\nOnline demo available [here](http://akserg.github.io/ng2-webpack-demo)\n\n## Usage\n\nIf you use SystemJS to load your files, you might have to update your config:\n\n```js\nSystem.config({\n    map: {\n        'ng2-slim-loading-bar': 'node_modules/ng2-slim-loading-bar/bundles/index.umd.js'\n    }\n});\n```\n\n#### 1. Update the markup\n- Import the `style.css` file into your web page\n- Add `\u003cng2-slim-loading-bar\u003e\u003c/ng2-slim-loading-bar\u003e` tag in template of your application component.\n\n#### 2. Import the `SlimLoadingBarModule`\nImport `SlimLoadingBarModule.forRoot()` in the NgModule of your application.\nThe `forRoot` method is a convention for modules that provide a singleton service.\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from '@angular/core';\nimport {SlimLoadingBarModule} from 'ng2-slim-loading-bar';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        SlimLoadingBarModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),\ndon't forget that you can use it to export the `SlimLoadingBarModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        SlimLoadingBarModule.forRoot()\n    ],\n    exports: [BrowserModule, SlimLoadingBarModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 3. Use the `SlimLoadingBarService` for your application\n- Import `SlimLoadingBarService` from `ng2-slim-loading-bar` in your application code:\n\n```js\nimport {Component} from '@angular/core';\nimport {SlimLoadingBarService} from 'ng2-slim-loading-bar';\n\n@Component({\n    selector: 'app',\n    template: `\n        \u003cdiv\u003eHello world\u003c/div\u003e\n        \u003cbutton (click)=\"startLoading()\"\u003eStart Loading\u003c/button\u003e\n        \u003cbutton (click)=\"stopLoading()\"\u003eStop Loading\u003c/button\u003e\n        \u003cbutton (click)=\"completeLoading()\"\u003eComplete Loading\u003c/button\u003e\n        \u003cng2-slim-loading-bar\u003e\u003c/ng2-slim-loading-bar\u003e\n    `\n})\nexport class AppComponent {\n\n    constructor(private slimLoadingBarService: SlimLoadingBarService) { }\n\n    startLoading() {\n        this.slimLoadingBarService.start(() =\u003e {\n            console.log('Loading complete');\n        });\n    }\n\n    stopLoading() {\n        this.slimLoadingBarService.stop();\n    }\n\n    completeLoading() {\n        this.slimLoadingBarService.complete();\n    }\n}\n```\n\n#### 3. Customize the the `ng2-slim-loading-bar` for your application\nYou can use the following properties to customize the `ng2-slim-loading-bar` component in your template:\n- `color` - The color of loading bar. Default is `firebrick`. It can be any CSS compatible value.\n- `height` - The height of loading bar. Default value is `2px`.\n- `show` - The flag helps hide and show the loading bar. Default value is `true`.\n\nExample: \n`\u003cng2-slim-loading-bar color=\"blue\" height=\"4px\"\u003e\u003c/ng2-slim-loading-bar\u003e`\n\n#### 4. Manage the loading bar\nYou can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:\n- `color` - The color of loading bar.\n- `height` - The height of loading bar.\n- `visible` - The flag helps hide and show the loading bar, false for hidden and true for visible.\n\nYou can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:\n- `start` - Start the loading progress. Use the callback function as an parameter to listed the complete event.\n- `stop` - Stop the loading progress. This method pause the current position of loading progress.\n- `reset`- Reset the position of loading progress to 0.\n- `complete` - Set the progress to 100% and hide the progress bar.\n\n#### 5. Events handling\nYou can hook up with our different types of events thrown.\n- `SlimLoadingBarEventType.PROGRESS`\n- `SlimLoadingBarEventType.HEIGHT`\n- `SlimLoadingBarEventType.COLOR`\n- `SlimLoadingBarEventType.VISIBLE`\n\nyou can subscribe to these events types by simplying doing this\n```js\n constructor(private _loadingBar: SlimLoadingBarService) {\n    this._loadingBar.events.subscribe((item:SlimLoadingBarEvent) =\u003e console.log(item));\n   }\n```\nwhere item returned is of `SlimLoadingBarEvent {type: SlimLoadingBarEventType, value: any}`\n\n# Credits \nInspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)\n\n# License\n [MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakserg%2Fng2-slim-loading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakserg%2Fng2-slim-loading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakserg%2Fng2-slim-loading-bar/lists"}