https://github.com/christopherkade/ng-load-animation

Loading animations for Angular2+
https://github.com/christopherkade/ng-load-animation

angular animation npm-package

Last synced: about 1 month ago
JSON representation

Loading animations for Angular2+

• Host: GitHub
• URL: https://github.com/christopherkade/ng-load-animation
• Owner: christopherkade
• Created: 2017-06-08T11:47:43.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-17T22:44:22.000Z (almost 9 years ago)
• Last Synced: 2025-12-25T16:16:48.298Z (5 months ago)
• Topics: angular, animation, npm-package
• Language: JavaScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ng-load-animation

A simple CSS animation component using Angular 2

[![NPM](https://nodei.co/npm/ng-load-animation.png?compact=true)](https://nodei.co/npm/ng-load-animation/)

![](https://user-images.githubusercontent.com/15229355/26939918-24364778-4c79-11e7-8dab-447cab3fe500.gif)

## Using ng-load-animation

Start by installing it to your Angular2+ project:

```bash

$ npm install ng-load-animation

```

and then add the following to your `AppModule`:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library

import { LoadModule, LoadService } from 'ng-load-animation';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    // module

    LoadModule

  ],

  providers: [

    // service

    LoadService

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

then display or hide the animation using the method `animate(boolean)` in your newly provided service:

```typescript

export class AppComponent {

  constructor(private loadService: LoadService) {}

  // use the method 'animate' to display or hide the animation

  start() {

        this.loadService.animate(true);

  }

  stop() {

       this.loadService.animate(false);

  }

}

```

Finally, you can use its components, in your Angular application:

```html

...

...

```

You can modify the animation with the following:

```

evenColor: Change the color of even numbered squares.

oddColor: Change the color of odd numbered squares.

width: Change the width of each square.

height: Change the hright of each square.

shape: Change the shape of the elements in the animation (default: square)

       Available shapes: "circle", "square"

```

Example:

```html

```

## License

MIT © [Christopher Kadé](mailto:c.kade96@gmail.com)