Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moff/angular2-loaders-css
Angular 2 module that implements Loaders.css spinners
https://github.com/moff/angular2-loaders-css
Last synced: about 1 month ago
JSON representation
Angular 2 module that implements Loaders.css spinners
- Host: GitHub
- URL: https://github.com/moff/angular2-loaders-css
- Owner: moff
- License: mit
- Created: 2016-08-16T06:49:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-13T19:47:20.000Z (almost 7 years ago)
- Last Synced: 2024-04-29T12:20:45.151Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 13.7 KB
- Stars: 26
- Watchers: 3
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular2-loaders-css - Angular 2 module that implements Loaders.css spinners. (Uncategorized / Uncategorized)
README
# Angular 2 Loaders.css spinners
[](http://opensource.org/licenses/MIT)
This repository contains Angular 2 module that implements Loaders.css spinners.
Check out the demo of Loaders.css
## Requirements
- [NPM](https://npmjs.org/) - Node package manager
## Installation
- run `npm install angular2-loaders-css --save`
- 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:
```
```
or import it in app.scss, e.g.:
```
@import "node_modules/loaders.css/src/loaders";
```
- import `LoadersCssModule` in your app's main module `app.module.ts`, e.g.:
```
// other imports
// ...
import { LoadersCssModule } from 'angular2-loaders-css';
// ...
@NgModule({
imports: [
// other imports
// ...
LoadersCssModule,
// ...
]
})
```
That should be enough if you use Webpack to bundle JavaScript.
Otherwise you'll have to edit `systemjs.config.js` to set correct path, e.g.:
```
// below you can see an example of map and packages sections in systemjs.config.js
// ...
// map tells the System loader where to look for things
var map = {
// ...
'angular2-loaders-css': 'node_modules/angular2-loaders-css',
// ...
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
// ...
'angular2-loaders-css': { main: 'index.js', defaultExtension: 'js' },
// ...
};
// ...
```
## Usage
Just use `LoadersCssComponent` in a template, e.g.:
```
import { Component } from '@angular/core';
@Component({
template: `
Home component header
`
})
export class HomeComponent {}
```
Important! 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.
You can pass `loaderClass`-attribute and specify CSS class for a loader if you want to change loader's color, e.g.:
```
.loader .my-loader {
background-color: #D32F2F;
}
```
Note that you have to use loader-attribute to choose a loader that'll be displayed, possible values are:
- ball-pulse
- ball-grid-pulse
- ball-clip-rotate
- ball-clip-rotate-pulse
- square-spin
- ball-clip-rotate-multiple
- ball-pulse-rise
- ball-rotate
- cube-transition
- ball-zig-zag
- ball-zig-zag-deflect
- ball-triangle-path
- ball-scale
- line-scale
- line-scale-party
- ball-scale-multiple
- ball-pulse-sync
- ball-beat
- line-scale-pulse-out
- line-scale-pulse-out-rapid
- ball-scale-ripple
- ball-scale-ripple-multiple
- ball-spin-fade-loader
- line-spin-fade-loader
- triangle-skew-spin
- pacman
- ball-grid-beat
- semi-circle-spin
## Feedback
Please [leave your feedback](https://github.com/moff/angular2-loaders-css/issues) if you have noticed any issues or have a feature request.
## License
The repository code is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).