alc
angular2-loaders-css
npm i angular2-loaders-css
alc

angular2-loaders-css

Angular 2 module that implements Loaders.css spinners

by Paul Moff

2.0.1 (see all)License:MITTypeScript:Built-In
npm i angular2-loaders-css
Readme

Angular 2 Loaders.css spinners

alt tag

license

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 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: `
        <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.

Downloads/wk

206

GitHub Stars

27

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

10

OPEN PRs

1
VersionTagPublished
2.0.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate