{"_id":"@cime/ngx-slim-loading-bar","_rev":"2-db91aefb90a13811cfff70b77c9d2443","name":"@cime/ngx-slim-loading-bar","dist-tags":{"latest":"7.0.2"},"versions":{"0.0.0-semantically-released":{"name":"@cime/ngx-slim-loading-bar","description":"Angular component shows slim loading bar at the top of the page","version":"0.0.0-semantically-released","scripts":{"test":"karma start","test-watch":"tsc && karma start --no-single-run --auto-watch","commit":"npm run prepublish && npm test && git-cz","prepublish":"ngc && npm run build","build":"webpack && cp style.css bundles/style.css","semantic-release":"semantic-release --prepare && npm publish --access=public && semantic-release --success","analyze":"ANALYZE=true webpack"},"repository":{"type":"git","url":"git+https://github.com/cime/ng2-slim-loading-bar.git"},"keywords":["angular","angular2","angular5","angular6","angular7","slim","loading","bar","progress"],"author":{"name":"Sergey Akopkokhyants"},"license":"MIT","bugs":{"url":"https://github.com/cime/ng2-slim-loading-bar/issues"},"main":"bundles/index.umd.js","module":"index.js","typings":"index.d.ts","homepage":"https://github.com/cime/ng2-slim-loading-bar","peerDependencies":{"@angular/core":"^7.0.2"},"devDependencies":{"@angular/common":"^7.0.2","@angular/compiler":"^7.0.2","@angular/compiler-cli":"^7.0.2","@angular/core":"^7.0.2","@angular/platform-browser":"^7.0.2","@angular/platform-browser-dynamic":"^7.0.2","@angular/platform-server":"^7.0.2","@types/hammerjs":"^2.0.36","@types/jasmine":"2.8.11","@types/node":"10.12.2","awesome-typescript-loader":"^5.2.1","codelyzer":"4.5.0","commitizen":"3.0.4","core-js":"2.5.7","cz-conventional-changelog":"2.1.0","istanbul-instrumenter-loader":"3.0.1","jasmine-core":"3.3.0","karma":"3.1.1","karma-chrome-launcher":"2.2.0","karma-coverage":"1.1.2","karma-firefox-launcher":"1.1.0","karma-jasmine":"1.1.2","karma-mocha-reporter":"^2.2.5","karma-remap-coverage":"~0.1.5","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","loader-utils":"~1.1.0","reflect-metadata":"^0.1.12","rxjs":"^6.3.3","semantic-release":"^15.10.8","source-map-loader":"0.2.4","ts-helpers":"1.1.2","tslint":"~5.11.0","tslint-loader":"3.5.4","typescript":"^3.1.6","webpack":"^4.25.1","webpack-bundle-analyzer":"^3.0.3","webpack-cli":"^3.1.2","zone.js":"^0.8.26"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"39b3e5009490a0942c13e8daab16df01cbf14a73","_id":"@cime/ngx-slim-loading-bar@0.0.0-semantically-released","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"cime","email":"cime3d@gmail.com"},"dist":{"integrity":"sha512-pOdQB+ia2IAzSysL49p6mqDEf/YcTjcZdAUNQ/Dsw2LBJ8umTw+r7tRy8pfmE0b5oc0+RBLplkhBou8gAezMqw==","shasum":"f4329d53758727d06e20042f6726a63c5b6e24bb","tarball":"https://registry.npmjs.org/@cime/ngx-slim-loading-bar/-/ngx-slim-loading-bar-0.0.0-semantically-released.tgz","fileCount":28,"unpackedSize":60880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4jQzCRA9TVsSAnZWagAA2CoP/2MRK64hCZIWE5dPObKT\nJpVjka/6vBTaJBjtMDtnljq+6wqj0JyLJw0A/h0SjEcZW0ZgGWpqo8sQOfIE\naPqGvKXtR8eWTIZlWU6m56xaxxG7hrRfk0AfdNWsE5ZEHjgcdAv5fX2WFOE3\nONYeiJERZIr240hTq4PPfT0WD63m/5Er22REj2ivHPZTgRAJ+kL+NQg+Q/4D\nXt2L9yJdpJbOydwD5+VBPWqBxTwh3UmMjPZeqoDBLPyaICiPu85W+AH865pP\nxzMHxZMDRL1wOx7Y8NOsLqkgRt1s1n4fHbWYT7NeclpTPTmiNqcA/OisqXBD\nAXQPXcGM8wq5AABMHL03nr7XB16XNVxJtOi05OwxdQPHBM0jp/6i4YAGwguX\n/IyC9p4nr1iblZ029zhkEm8nssrenqSCHHem3Tm3DobktPi0Q1fhLXk4uXGm\nImUbkn+p8wThxDxAMPhfwbdBfCigr8XT7gqryQpO/TN8cFU9nKrrj/g4YDjf\nvpBl6U2RkqN56MdFvUiqkiw/OAvaOa18TfXZaFrEjjMlgNdDqmciJ3nvoKbR\nZ8R205hn8HRuXtjkqg6uN68FKuxPW61BvCI/N1mU6/+YZ0NBugusvMd2pplF\np8foUIRhUse4i/xjhcjc9XGYb+ld8guOMUqzhuU0hjgl19Q/v10KdSKEPKv0\nSsp+\r\n=qpHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBE1Pg2Vt+8yZrLBqpiWg6ik2B3C3UW7QZYFZSzl8QALAiEAvokHMhgtDH+AI3yT6N2KBP1nWl08y1/5DuKD4Ku1Pqs="}]},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-slim-loading-bar_0.0.0-semantically-released_1541551154817_0.48577144282669127"},"_hasShrinkwrap":false},"7.0.2":{"name":"@cime/ngx-slim-loading-bar","description":"Angular component shows slim loading bar at the top of the page","version":"7.0.2","scripts":{"test":"karma start","test-watch":"tsc && karma start --no-single-run --auto-watch","commit":"npm run prepublish && npm test && git-cz","prepublish":"ngc && npm run build","build":"webpack && cp style.css bundles/style.css","semantic-release":"semantic-release --prepare && npm publish --access=public && semantic-release --success","analyze":"ANALYZE=true webpack"},"repository":{"type":"git","url":"git+https://github.com/cime/ngx-slim-loading-bar.git"},"keywords":["angular","angular2","angular5","angular6","angular7","slim","loading","bar","progress"],"author":{"name":"Sergey Akopkokhyants"},"license":"MIT","bugs":{"url":"https://github.com/cime/ngx-slim-loading-bar/issues"},"main":"bundles/index.umd.js","module":"index.js","typings":"index.d.ts","homepage":"https://github.com/cime/ngx-slim-loading-bar","peerDependencies":{"@angular/core":"^7.0.2"},"devDependencies":{"@angular/common":"^7.0.2","@angular/compiler":"^7.0.2","@angular/compiler-cli":"^7.0.2","@angular/core":"^7.0.2","@angular/platform-browser":"^7.0.2","@angular/platform-browser-dynamic":"^7.0.2","@angular/platform-server":"^7.0.2","@types/hammerjs":"^2.0.36","@types/jasmine":"2.8.11","@types/node":"10.12.2","awesome-typescript-loader":"^5.2.1","codelyzer":"4.5.0","commitizen":"3.0.4","core-js":"2.5.7","cz-conventional-changelog":"2.1.0","istanbul-instrumenter-loader":"3.0.1","jasmine-core":"3.3.0","karma":"3.1.1","karma-chrome-launcher":"2.2.0","karma-coverage":"1.1.2","karma-firefox-launcher":"1.1.0","karma-jasmine":"1.1.2","karma-mocha-reporter":"^2.2.5","karma-remap-coverage":"~0.1.5","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","loader-utils":"~1.1.0","reflect-metadata":"^0.1.12","rxjs":"^6.3.3","semantic-release":"^15.10.8","source-map-loader":"0.2.4","ts-helpers":"1.1.2","tslint":"~5.11.0","tslint-loader":"3.5.4","typescript":"^3.1.6","webpack":"^4.25.1","webpack-bundle-analyzer":"^3.0.3","webpack-cli":"^3.1.2","zone.js":"^0.8.26"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"ee988e5182aa7ee6d41ba5ceee61ca379537c23f","_id":"@cime/ngx-slim-loading-bar@7.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"cime","email":"cime3d@gmail.com"},"dist":{"integrity":"sha512-60mCnRnIsK2+34eFaFlQka6Vc/7RMZeOH+5P5rVLTmE2gw2KDEg5L4Wcykcd8j30SebkOHAv3HJUOlc5FP3Gjg==","shasum":"e2dda16acde6285218cf9efb3d30d4d9a4b4f7bc","tarball":"https://registry.npmjs.org/@cime/ngx-slim-loading-bar/-/ngx-slim-loading-bar-7.0.2.tgz","fileCount":28,"unpackedSize":60837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4q0pCRA9TVsSAnZWagAAlWkP/231Nb9/gmFTOpYqfxWo\n7OZz6VOib5vahoMOJa79gD+ZqMoosYDC/uFqOfuiZpSOfdx70WLNA76pbN0U\nODHkHUtsps+v9MD8KI/4iHJfkR8D6RMXa3+ErGqjuBBCzFjVDHRqKKw6eQVD\n5/Hcz8rDjl2PCWaC8t2cbn/ZkOlEcQhlvrKZB5LP0WEvxbj7mkmKbwKc7oJ3\nh7OnwccxGPYeNVxyvo9SHobFFSlf+BHdsf/z5QZzaW2IYKupmS0HDEkwhRLI\n4EJMlwbd7MP4UR20CcE/RPQ43NcHoJ4HD7UhuYdfK7q6FaHgBYrgk7Z5v47d\nlZITjOjQg38KEkVXJb0Pu4FSKFbBZofFgTYlisiGO4a19WiuUuBVuiJ/X65G\nZ80v1hVfpbjnIobJUu8a8lrbzGYRss7D0lhr80NYX1ssPHZG44JuwDV+Ldpv\nyMNe2jQOexaW/wrN/+1Vi7GrBsQd7Du1Mm5y8zM19l00G9JK8fAXQ6KftvFq\nHzupAhiYCJ3gNWj9uTrK5oYN2VBto/fAyCewsafTaghTOV1UqOXXx1DvKxxX\nInQUbOvH76hXr713C76bWFgo/ecQ25VL8B/aj+8QnKqaNOM/8c8HHlGoJUPR\n9nqcT+oKld00Gqn6LyqjApqKf7/i2Ehz1w31xZzb3r85IlmUYQdJUrmpWkO7\naBEO\r\n=UvfT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvRgcaE9djJ93i/ThmhGp42DZawQLjHtGNlRhj4BMbaAiEA+lFCH6qn7BA8YRQ5pmo5NcHMx6M0SwLwRsZVfHHC5XI="}]},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-slim-loading-bar_7.0.2_1541582121088_0.3381705993623121"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-07T00:39:14.645Z","0.0.0-semantically-released":"2018-11-07T00:39:14.977Z","modified":"2022-04-04T22:59:51.331Z","7.0.2":"2018-11-07T09:15:21.202Z"},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"description":"Angular component shows slim loading bar at the top of the page","homepage":"https://github.com/cime/ngx-slim-loading-bar","keywords":["angular","angular2","angular5","angular6","angular7","slim","loading","bar","progress"],"repository":{"type":"git","url":"git+https://github.com/cime/ngx-slim-loading-bar.git"},"author":{"name":"Sergey Akopkokhyants"},"bugs":{"url":"https://github.com/cime/ngx-slim-loading-bar/issues"},"license":"MIT","readme":"# Angular Slim Loading Bar [](https://www.npmjs.com/package/ng2-slim-loading-bar) [](https://www.npmjs.com/package/ng2-slim-loading-bar)\r\nAngular component shows slim loading bar at the top of the page of your application.\r\n\r\n[](https://travis-ci.org/akserg/ng2-slim-loading-bar)\r\n[](https://github.com/semantic-release/semantic-release)\r\n[](http://commitizen.github.io/cz-cli/)\r\n[](https://david-dm.org/akserg/ng2-slim-loading-bar)\r\n[](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\r\n[](https://snyk.io/test/github/akserg/ng2-slim-loading-bar)\r\n\r\nFollow me [](https://twitter.com/akopkokhyants) to be notified about new releases.\r\n\r\n_Some of these APIs and Components are not final and are subject to change!_\r\n\r\n## Installation\r\n\r\n```sh\r\nnpm install @cime/ngx-slim-loading-bar --save\r\n```\r\n\r\n## Demo\r\nSimple examples using ngx-slim-loading-bar:\r\n- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\r\n- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\r\n\r\nOnline demo available [here](http://akserg.github.io/ng2-webpack-demo)\r\n\r\n## Usage\r\n\r\nIf you use SystemJS to load your files, you might have to update your config:\r\n\r\n```js\r\nSystem.config({\r\n map: {\r\n '@cime/ngx-slim-loading-bar': 'node_modules/@cime/ngx-slim-loading-bar/bundles/index.umd.js'\r\n }\r\n});\r\n```\r\n\r\n#### 1. Update the markup\r\n- Import the `style.css` file into your web page\r\n- Add `` tag in template of your application component.\r\n\r\n#### 2. Import the `SlimLoadingBarModule`\r\nImport `SlimLoadingBarModule.forRoot()` in the NgModule of your application.\r\nThe `forRoot` method is a convention for modules that provide a singleton service.\r\n\r\n```ts\r\nimport {BrowserModule} from \"@angular/platform-browser\";\r\nimport {NgModule} from '@angular/core';\r\nimport {SlimLoadingBarModule} from '@cime/ngx-slim-loading-bar';\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n SlimLoadingBarModule.forRoot()\r\n ],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),\r\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.\r\n\r\n```ts\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n SlimLoadingBarModule.forRoot()\r\n ],\r\n exports: [BrowserModule, SlimLoadingBarModule],\r\n})\r\nexport class SharedModule {\r\n}\r\n```\r\n\r\n#### 3. Use the `SlimLoadingBarService` for your application\r\n- Import `SlimLoadingBarService` from `@cime/ngx-slim-loading-bar` in your application code:\r\n\r\n```js\r\nimport {Component} from '@angular/core';\r\nimport {SlimLoadingBarService} from '@cime/ngx-slim-loading-bar';\r\n\r\n@Component({\r\n selector: 'app',\r\n template: `\r\n
Hello world
\r\n \r\n \r\n \r\n \r\n `\r\n})\r\nexport class AppComponent {\r\n\r\n constructor(private slimLoadingBarService: SlimLoadingBarService) { }\r\n\r\n startLoading() {\r\n this.slimLoadingBarService.start(() => {\r\n console.log('Loading complete');\r\n });\r\n }\r\n\r\n stopLoading() {\r\n this.slimLoadingBarService.stop();\r\n }\r\n\r\n completeLoading() {\r\n this.slimLoadingBarService.complete();\r\n }\r\n}\r\n```\r\n\r\n#### 3. Customize the the `ng2-slim-loading-bar` for your application\r\nYou can use the following properties to customize the `ngx-slim-loading-bar` component in your template:\r\n- `color` - The color of loading bar. Default is `firebrick`. It can be any CSS compatible value.\r\n- `height` - The height of loading bar. Default value is `2px`.\r\n- `show` - The flag helps hide and show the loading bar. Default value is `true`.\r\n\r\nExample: \r\n``\r\n\r\n#### 4. Manage the loading bar\r\nYou can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:\r\n- `color` - The color of loading bar.\r\n- `height` - The height of loading bar.\r\n- `visible` - The flag helps hide and show the loading bar, false for hidden and true for visible.\r\n\r\nYou can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:\r\n- `start` - Start the loading progress. Use the callback function as an parameter to listed the complete event.\r\n- `stop` - Stop the loading progress. This method pause the current position of loading progress.\r\n- `reset`- Reset the position of loading progress to 0.\r\n- `complete` - Set the progress to 100% and hide the progress bar.\r\n\r\n#### 5. Events handling\r\nYou can hook up with our different types of events thrown.\r\n- `SlimLoadingBarEventType.PROGRESS`\r\n- `SlimLoadingBarEventType.HEIGHT`\r\n- `SlimLoadingBarEventType.COLOR`\r\n- `SlimLoadingBarEventType.VISIBLE`\r\n\r\nyou can subscribe to these events types by simplying doing this\r\n```js\r\n constructor(private _loadingBar: SlimLoadingBarService) {\r\n this._loadingBar.events.subscribe((item:SlimLoadingBarEvent) => console.log(item));\r\n }\r\n```\r\nwhere item returned is of `SlimLoadingBarEvent {type: SlimLoadingBarEventType, value: any}`\r\n\r\n# Credits \r\nInspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)\r\n\r\n# License\r\n [MIT](/LICENSE)\r\n","readmeFilename":"README.md"}