This repository contains Angular 2 module that implements Loaders.css spinners.

Check out the demo of Loaders.css

• NPM - Node package manager

• 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 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' }, // ... }; // ... 

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

Please leave your feedback if you have noticed any issues or have a feature request.

The repository code is open-sourced software licensed under the MIT license.