angular2-loaders-css
v2.0.1
Published
Angular 2 module for Loaders.css
Downloads
300
Maintainers
Readme
Angular 2 Loaders.css spinners
This repository contains Angular 2 module that implements Loaders.css spinners.
Check out the demo of Loaders.css
Requirements
- NPM - Node package manager
Installation
- run
npm install angular2-loaders-css --save
- link Loaders.css stylesheet to your document - you can find it in /node_modules/loaders.css/, e.g. add this in your html-document:
<link rel="stylesheet" href="node_modules/loaders.css/loaders.min.css">
or import it in app.scss, e.g.:
@import "node_modules/loaders.css/src/loaders";
- import
LoadersCssModule
in your app's main moduleapp.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: `
<h2>Home component header</h2>
<loaders-css [loader]="'square-spin'" [loaderClass]="'my-loader'"></loaders-css>
`
})
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 if you have noticed any issues or have a feature request.
License
The repository code is open-sourced software licensed under the MIT license.