{"id":13497371,"url":"https://github.com/moff/angular2-loaders-css","last_synced_at":"2025-04-25T00:32:21.717Z","repository":{"id":57179671,"uuid":"65794846","full_name":"moff/angular2-loaders-css","owner":"moff","description":"Angular 2 module that implements Loaders.css spinners","archived":false,"fork":false,"pushed_at":"2018-02-13T19:47:20.000Z","size":14,"stargazers_count":26,"open_issues_count":11,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-29T12:20:45.151Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moff.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}},"created_at":"2016-08-16T06:49:34.000Z","updated_at":"2023-04-20T01:29:22.000Z","dependencies_parsed_at":"2022-09-14T03:21:02.243Z","dependency_job_id":null,"html_url":"https://github.com/moff/angular2-loaders-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moff%2Fangular2-loaders-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moff%2Fangular2-loaders-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moff%2Fangular2-loaders-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moff%2Fangular2-loaders-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moff","download_url":"https://codeload.github.com/moff/angular2-loaders-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250733415,"owners_count":21478366,"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-07-31T20:00:29.921Z","updated_at":"2025-04-25T00:32:21.424Z","avatar_url":"https://github.com/moff.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Angular 2 Loaders.css spinners\n\n![alt tag](http://i.imgur.com/6TCsrFV.png)\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](http://opensource.org/licenses/MIT)\n\nThis repository contains Angular 2 module that implements Loaders.css spinners.\n\n\u003ca href=\"https://connoratherton.com/loaders\" target_='blank'\u003eCheck out the demo of Loaders.css\u003c/a\u003e\n\n\n## Requirements\n- [NPM](https://npmjs.org/) - Node package manager\n\n\n## Installation\n\n- run `npm install angular2-loaders-css --save`\n- link [Loaders.css](https://github.com/ConnorAtherton/loaders.css) stylesheet to your document - you can find it in /node_modules/loaders.css/, e.g. add this in your html-document:\n\n```\n\u003clink rel=\"stylesheet\" href=\"node_modules/loaders.css/loaders.min.css\"\u003e\n```\nor import it in app.scss, e.g.:\n\n```\n@import \"node_modules/loaders.css/src/loaders\";\n```\n\n- import `LoadersCssModule` in your app's main module `app.module.ts`, e.g.:\n\n```\n// other imports\n// ...\nimport { LoadersCssModule } from 'angular2-loaders-css';\n// ...\n\n@NgModule({\n    imports: [\n        // other imports\n        // ...\n        LoadersCssModule,\n        // ...\n    ]\n})\n```\n\nThat should be enough if you use Webpack to bundle JavaScript.\n\nOtherwise you'll have to edit `systemjs.config.js` to set correct path, e.g.:\n\n```\n// below you can see an example of map and packages sections in systemjs.config.js\n\n// ...\n// map tells the System loader where to look for things\nvar map = {\n    // ...\n    'angular2-loaders-css':       'node_modules/angular2-loaders-css',\n    // ...\n};\n// packages tells the System loader how to load when no filename and/or no extension\nvar packages = {\n    // ...\n    'angular2-loaders-css':       { main: 'index.js', defaultExtension: 'js' },\n    // ...\n};\n\n// ...\n```\n\n## Usage\n\nJust use `LoadersCssComponent` in a template, e.g.:\n\n```\nimport { Component } from '@angular/core';\n\n@Component({\n    template: `\n        \u003ch2\u003eHome component header\u003c/h2\u003e\n        \u003cloaders-css [loader]=\"'square-spin'\" [loaderClass]=\"'my-loader'\"\u003e\u003c/loaders-css\u003e\n    `\n})\nexport class HomeComponent {}\n```\n\nImportant! If you don't see spinner and there are no errors in console - it can be because spinner's color is the same as the background's color - usually it's white.\n\nYou can pass `loaderClass`-attribute and specify CSS class for a loader if you want to change loader's color, e.g.:\n\n```\n.loader .my-loader {\n    background-color: #D32F2F;\n}\n```\n\nNote that you have to use loader-attribute to choose a loader that'll be displayed, possible values are:\n\n- ball-pulse\n- ball-grid-pulse\n- ball-clip-rotate\n- ball-clip-rotate-pulse\n- square-spin\n- ball-clip-rotate-multiple\n- ball-pulse-rise\n- ball-rotate\n- cube-transition\n- ball-zig-zag\n- ball-zig-zag-deflect\n- ball-triangle-path\n- ball-scale\n- line-scale\n- line-scale-party\n- ball-scale-multiple\n- ball-pulse-sync\n- ball-beat\n- line-scale-pulse-out\n- line-scale-pulse-out-rapid\n- ball-scale-ripple\n- ball-scale-ripple-multiple\n- ball-spin-fade-loader\n- line-spin-fade-loader\n- triangle-skew-spin\n- pacman\n- ball-grid-beat\n- semi-circle-spin\n\n\n## Feedback\n\nPlease [leave your feedback](https://github.com/moff/angular2-loaders-css/issues) if you have noticed any issues or have a feature request.\n\n\n## License\n\nThe repository code is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoff%2Fangular2-loaders-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoff%2Fangular2-loaders-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoff%2Fangular2-loaders-css/lists"}