{"id":15508479,"url":"https://github.com/anthonynahas/ngx-animated-gradient","last_synced_at":"2025-04-23T02:25:54.102Z","repository":{"id":34300378,"uuid":"175961877","full_name":"AnthonyNahas/ngx-animated-gradient","owner":"AnthonyNahas","description":"Angular Directive that animates the gradient background","archived":false,"fork":false,"pushed_at":"2022-06-02T21:37:37.000Z","size":20623,"stargazers_count":18,"open_issues_count":4,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T00:24:34.869Z","etag":null,"topics":["angular","animation","background","gradient","library","ngx"],"latest_commit_sha":null,"homepage":"https://anthonynahas.github.io/ngx-animated-gradient","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/AnthonyNahas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-16T11:12:04.000Z","updated_at":"2024-08-15T14:22:18.000Z","dependencies_parsed_at":"2022-08-25T09:41:57.267Z","dependency_job_id":null,"html_url":"https://github.com/AnthonyNahas/ngx-animated-gradient","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-animated-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-animated-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-animated-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-animated-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnthonyNahas","download_url":"https://codeload.github.com/AnthonyNahas/ngx-animated-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250356199,"owners_count":21417045,"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","animation","background","gradient","library","ngx"],"created_at":"2024-10-02T09:38:47.252Z","updated_at":"2025-04-23T02:25:54.076Z","avatar_url":"https://github.com/AnthonyNahas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\" \n  src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# ngx-animated-gradient - Angular Directivated that animated the gardient background\n\n[![npm version](https://badge.fury.io/js/ngx-animated-gradient.svg)](https://badge.fury.io/js/ngx-animated-gradient),\n[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://AnthonyNahas.github.io/ngx-animated-gradient)\n[![Join the chat at (https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/ngx-auth-firebaseui/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://travis-ci.org/AnthonyNahas/ngx-animated-gradient.svg?branch=master)](https://travis-ci.org/AnthonyNahas/ngx-animated-gradient)\n[![dependency Status](https://david-dm.org/AnthonyNahas/ngx-animated-gradient/status.svg)](https://david-dm.org/AnthonyNahas/ngx-animated-gradient)\n[![devDependency Status](https://david-dm.org/AnthonyNahas/ngx-animated-gradient/dev-status.svg?branch=master)](https://david-dm.org/AnthonyNahas/ngx-animated-gradient#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/AnthonyNahas/ngx-animated-gradient.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/AnthonyNahas/ngx-animated-gradient.svg?style=flat-square)](https://github.com/AnthonyNahas/ngx-animated-gradient/blob/master/LICENSE)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-animated-gradien demonstration\" style=\"text-align: center; height: 400px\"\n   src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/assets/ngx-animated-gradient.gif\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-animated-gradien demonstration\" style=\"text-align: center; height: 400px\"\n   src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/assets/1.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-animated-gradien demonstration\" style=\"text-align: center; height: 400px\"\n   src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/assets/2.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-animated-gradien demonstration\" style=\"text-align: center; height: 400px\"\n   src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/assets/3.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-animated-gradien demonstration\" style=\"text-align: center; height: 400px\"\n   src=\"https://cdn.jsdelivr.net/gh/AnthonyNahas/ngx-animated-gradient@master/assets/4.png\"\u003e\n\u003c/p\u003e\n\n\n## Demo\n\nView all the directives in action at https://AnthonyNahas.github.io/ngx-animated-gradient\n\n## Dependencies\n* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0)\n\n## Installation\n\n## 1. Install via *ng add*. (Recommended)\n\nNow add the library via the `angular schematics`\n```shell\nng add ngx-animated-gradient\n```\n## 2. Install via *npm*. (Alternative) \n\nNow install `ngx-animated-gradient` via:\n```shell\nnpm install --save ngx-animated-gradient\n```\n\n---\n##### SystemJS\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ngx-animated-gradient`:\n```js\nmap: {\n  'ngx-animated-gradient': 'node_modules/ngx-animated-gradient/bundles/ngx-animated-gradient.umd.js',\n}\n```\n---\n\nOnce installed you need to import the main module:\n```js\nimport { NgxAnimatedGradientModule } from 'ngx-animated-gradient';\n```\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` NgxAnimatedGradientModule .forRoot()`):\n```js\nimport { NgxAnimatedGradientModule } from 'ngx-animated-gradient';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgxAnimatedGradientModule.forRoot(), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import ` NgxAnimatedGradientModule `:\n\n```js\nimport { NgxAnimatedGradientModule } from 'ngx-animated-gradient';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [NgxAnimatedGradientModule, ...], \n})\nexport class OtherModule {\n}\n```\n\n## Usage\n\n\n```html\n\u003cdiv ngxAnimatedGradient\u003e\u003c/div\u003e\n```\n\nanother full example \n\n```html\n\u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"card-header\"\u003e\n        ngx-animated-gradient\n      \u003c/div\u003e\n      \u003cdiv class=\"card-body\" ngxAnimatedGradient style=\"height: 400px\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n| option | bind  |  type  |   default    | description  |\n|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|    \n| colors       | Input()  | RGBValue    | (see the code ;)) |  colors to render\n| tickSpeed   | Input()  | number| 16 |  The tick speed for calling the update of the gradient\n| colorIndices   | Input()  | number[] | [0, 1, 2, 3] | The color indices, these indicate where in the color table to load from\n| gradientSpeed   | Input()  | number | 0.002 | The multiplier for the gradient speed\n\n\n## Contributors\n\n- @tanepiper  \n\n## Credit\n\nThis library is an angular directive/version of [this](https://codepen.io/quasimondo/pen/lDdrF) codepen\n\n\n\u003ca name=\"other-angular-libraries\"/\u003e\n\n\n## Other Angular Libraries\n\n\n- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)\n- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)\n- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)\n- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/jumbotron](https://github.com/angular-material-extensions/jumbotron)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n+ or open an appropriate [issue](https://github.com/AnthonyNahas/ngx-auth-firebaseui/issues)\n+ let us chat on [Gitter](https://gitter.im/ngx-auth-firebaseui/Lobby)\n \n Built by and for developers :heart: we will help you :punch:\n\n---\n\n![jetbrains logo](assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)\n\nThis project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)\n\n## License\n\nCopyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-animated-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonynahas%2Fngx-animated-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-animated-gradient/lists"}