https://github.com/aeharding/angular-ladda-lw

A lightweight, native Angular ladda indicator
https://github.com/aeharding/angular-ladda-lw

Last synced: 11 months ago
JSON representation

A lightweight, native Angular ladda indicator

• Host: GitHub
• URL: https://github.com/aeharding/angular-ladda-lw
• Owner: aeharding
• License: mit
• Created: 2016-01-22T21:12:01.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-29T09:50:25.000Z (almost 10 years ago)
• Last Synced: 2025-03-25T18:14:59.984Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://aeharding.github.io/angular-ladda-lw/
• Size: 33.2 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# angular-ladda-lw

[![Build Status](https://travis-ci.org/aeharding/angular-ladda-lw.svg?branch=master)](https://travis-ci.org/aeharding/angular-ladda-lw)

[![Coverage Status](https://coveralls.io/repos/github/aeharding/angular-ladda-lw/badge.svg?branch=master)](https://coveralls.io/github/aeharding/angular-ladda-lw?branch=master)

[![npm version](https://badge.fury.io/js/angular-ladda-lw.svg)](https://badge.fury.io/js/angular-ladda-lw)

[![Bower version](https://badge.fury.io/bo/angular-ladda-lw.svg)](https://badge.fury.io/bo/angular-ladda-lw)

![Preview](http://i.imgur.com/6QZvPo4.gif)

A lightweight ladda alternative for Angular. [[Demo]](http://aeharding.github.io/angular-ladda-lw/)

### Requirements

  * Angular

  * ngAnimate

### Browsers

  * IE10+, Chrome, FF, Opera with animations

  * IE9 without animations (but functional)

## Install

```

bower install angular-ladda-lw --save

```

or

```

npm install angular-ladda-lw --save

```

### Files

You need the js and css files.

```

bower_components/angular-ladda-lw/dist/angular-ladda-lw.js

bower_components/angular-ladda-lw/dist/angular-ladda-lw.css

```

You can also use the `angular-ladda-lw.min.*` if you want.

### Module name

```js

angular.module('myApp', ['angular-ladda-lw']);

```

### Example

```html

Hello, world!

```

```js

this.doThing = thing => {

  this.loading = true;

  MyService.doThing(thing).then(res => {

    // TODO

  }, err => {

    // Stuff broke

  }).finally(() => {

    this.loading = false;

  });

}

```

## Develop

### Dependencies

```

npm install -g babel-cli babel-preset-es2015 node-sass uglify-js sass-lint eslint karma-cli http-server

npm install

```

### Develop

```

npm start

```

### Run demo server

From project directory:

```

http-server . -o

```

Then go to `http://localhost:8080/demo/`

## Bonus!

The spinner is stolen from [chieffancypants/angular-loading-bar](https://github.com/chieffancypants/angular-loading-bar), so if you decide to use that, this project will look consistent and professional. :)