{"id":13808677,"url":"https://github.com/zak-c/ngx-loading","last_synced_at":"2025-05-14T02:32:19.447Z","repository":{"id":20126276,"uuid":"88790501","full_name":"Zak-C/ngx-loading","owner":"Zak-C","description":"A loading spinner for Angular applications.","archived":false,"fork":false,"pushed_at":"2024-05-02T16:42:00.000Z","size":2854,"stargazers_count":264,"open_issues_count":9,"forks_count":66,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-11-18T13:15:49.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zak-C.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2017-04-19T21:01:13.000Z","updated_at":"2024-09-24T16:45:20.000Z","dependencies_parsed_at":"2024-05-02T17:45:21.824Z","dependency_job_id":"6a5ca857-6366-4ab6-9926-06fd399af29a","html_url":"https://github.com/Zak-C/ngx-loading","commit_stats":{"total_commits":114,"total_committers":5,"mean_commits":22.8,"dds":"0.17543859649122806","last_synced_commit":"113a853efb585807e24fab581928b39c5ff8daa0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zak-C%2Fngx-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zak-C%2Fngx-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zak-C%2Fngx-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zak-C%2Fngx-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zak-C","download_url":"https://codeload.github.com/Zak-C/ngx-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273259,"owners_count":17448074,"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":[],"created_at":"2024-08-04T01:01:48.961Z","updated_at":"2024-11-19T00:30:58.943Z","avatar_url":"https://github.com/Zak-C.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# ngx-loading\n\nA customisable loading spinner for Angular applications.\n\n[![npm version](https://badge.fury.io/js/ngx-loading.svg)](https://badge.fury.io/js/ngx-loading)\n[![Monthly Downloads](https://img.shields.io/npm/dm/ngx-loading)]()\n![Known Vulnerabilities](https://snyk.io/test/github/Zak-C/ngx-loading/badge.svg)\n\n![ngx-loading](https://cloud.githubusercontent.com/assets/26901242/25317405/05a1ce4a-2870-11e7-8693-ed2394b54cba.gif)\n\n## Table of contents\n\n1. [Demo](#demo)\n2. [Installation](#installation)\n3. [Getting started](#getting-started)\n4. [Input parameters](#input-parameters)\n5. [Config options](#config-options)\n\n## Demo\n\nCheck out the interactive demo on [StackBlitz](https://stackblitz.com/edit/ngx-loading-sample?file=src/app/app.component.html \"ngx-loading StackBlitz demo\").\n\n## Installation\n\nInstall ngx-loading via NPM, using the command below.\n\n### NPM\n\n```shell\nnpm install --save ngx-loading\n```\n\nNOTE: Version 17 of this package requires Angular 17 as a dependency. If you are using an older version of Angular, please install the relevant version e.g. 2.0.1 for Angular 2:\n\n```shell\nnpm install --save ngx-loading@2.0.1\n```\n\n## Getting started\n\nImport the `NgxLoadingModule` in your root application module:\n\n```typescript\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { CoreModule } from \"./core/core.module\";\nimport { NgxLoadingModule } from \"ngx-loading\";\n\n@NgModule({\n  //...\n  imports: [\n    //...\n    NgxLoadingModule.forRoot({}),\n  ],\n  //...\n})\nexport class AppModule {}\n```\n\nYou must create a boolean variable (e.g. `loading` below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\n\n@Component({\n  //...\n})\nexport class AppComponent implements OnInit {\n  //...\n  public loading = false;\n\n  constructor(private authService: AuthService) {}\n\n  ngOnInit() {}\n\n  Login() {\n    this.loading = true;\n    this.authService.login(this.email, this.password).subscribe(\n      (res) =\u003e {\n        this.loading = false;\n        //...\n      },\n      (err) =\u003e {\n        this.loading = false;\n        //...\n      }\n    );\n  }\n}\n```\n\nNext, add the ngx-loading component selector to your application component's template. Set the `[show]` input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the `[config]` input variable of ngx-loading to setup custom configuration options. If the `[config]` input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options) for further information.\n\nYou can also optionally define a `[template]` input variable, which can be used to inject your own custom templates into the component.\n\nNOTE: ngx-loading will fill the entirety of its parent component. If you wish for ngx-loading to only fill a specific element within your component, ensure that ngx-loading is a child element of that element, and that the containing element has its `position` attribute set to `relative`.\n\n```html\n\u003cdiv class=\"my-container\"\u003e\n  \u003cng-template #customLoadingTemplate\u003e\n    \u003cdiv class=\"custom-class\"\u003e\n      \u003ch3\u003eLoading...\u003c/h3\u003e\n      \u003cbutton (click)=\"showAlert()\"\u003eClick me!\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\n  \u003cngx-loading\n    [show]=\"loading\"\n    [config]=\"{ backdropBorderRadius: '3px' }\"\n    [template]=\"customLoadingTemplate\"\n  \u003e\u003c/ngx-loading\u003e\n  //...\n\u003c/div\u003e\n```\n\n## Input parameters\n\n| Input    | Required | Details                                                                                                                                                                                                                                                         |\n| -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| show     | Required | A boolean, which will determine when ngx-loading is visible.                                                                                                                                                                                                    |\n| config   | Optional | A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options). |\n| template | Optional | A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component.                                                                                                                       |\n\n## Config options\n\n| Option                   | Required | Default                              | Details                                                                                                         |\n| ------------------------ | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |\n| animationType            | Optional | ngxLoadingAnimationTypes.threeBounce | The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options. |\n| backdropBorderRadius     | Optional | 0                                    | The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'.                                       |\n| backdropBackgroundColour | Optional | rgba(0, 0, 0, 0.3)                   | The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'.                |\n| fullScreenBackdrop       | Optional | false                                | Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen.  |\n| primaryColour            | Optional | #ffffff                              | The primary colour, which will be applied to the ngx-loading animation.                                         |\n| secondaryColour          | Optional | #ffffff                              | The secondary colour, which will be applied to the ngx-loading animation (where appropriate).                   |\n| tertiaryColour           | Optional | #ffffff                              | The tertiary colour, which will be applied to the ngx-loading animation (where appropriate).                    |\n\nConfig options can be set globally (using the `.forRoot() module import statement`), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.\n\n```typescript\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { CoreModule } from \"./core/core.module\";\nimport { NgxLoadingModule, ngxLoadingAnimationTypes } from \"ngx-loading\";\n\n@NgModule({\n  //...\n  imports: [\n    //...\n    NgxLoadingModule.forRoot({\n      animationType: ngxLoadingAnimationTypes.wanderingCubes,\n      backdropBackgroundColour: \"rgba(0,0,0,0.1)\",\n      backdropBorderRadius: \"4px\",\n      primaryColour: \"#ffffff\",\n      secondaryColour: \"#ffffff\",\n      tertiaryColour: \"#ffffff\",\n    }),\n  ],\n  //...\n})\nexport class AppModule {}\n```\n\n```html\n\u003cdiv class=\"my-container\"\u003e\n  \u003cng-template #customLoadingTemplate\u003e\n    \u003cdiv class=\"custom-class\"\u003e\n      \u003ch3\u003eLoading...\u003c/h3\u003e\n      \u003cbutton (click)=\"showAlert()\"\u003eClick me!\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\n  \u003cngx-loading\n    [show]=\"loading\"\n    [config]=\"{ animationType: ngxLoadingAnimationTypes.rectangleBounce,\n        backdropBackgroundColour: 'rgba(255,255,255,0.3)', backdropBorderRadius: '10px',\n        primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }\"\n    [template]=\"customLoadingTemplate\"\n  \u003e\u003c/ngx-loading\u003e\n  //...\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzak-c%2Fngx-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzak-c%2Fngx-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzak-c%2Fngx-loading/lists"}