https://github.com/benjamincharity/angular-ladda-fork

https://github.com/benjamincharity/angular-ladda-fork

Last synced: 11 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/benjamincharity/angular-ladda-fork
• Owner: benjamincharity
• License: mit
• Created: 2015-04-29T13:12:26.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-08-18T15:59:06.000Z (about 8 years ago)
• Last Synced: 2024-04-15T09:19:20.120Z (7 months ago)
• Language: HTML
• Size: 55.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# angular-ladda 

![License](https://img.shields.io/npm/l/angular-ladda.svg)

![Bower](https://img.shields.io/bower/v/angular-ladda.svg) [![NPM](https://img.shields.io/npm/v/angular-ladda.svg)](https://www.npmjs.com/package/angular-ladda)

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

An angular directive wrapper for Ladda.

[Check out the demo page.](http://remotty.github.io/angular-ladda)

## Getting started

(1) Get angular-ladda via [Bower](http://bower.io/)

```sh

$ bower install angular-ladda

```

or add bower.json

```sh

$ bower install angular-ladda --save

```

(2) add css & javascript link to html

```html

...

...

...

```

(3) add `'angular-ladda'` to your main module's list of dependencies

```javascript

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

```

(4) enjoy!

## Quick example

### options

use `laddaProvider`

- style

   - expand-left

   - expand-right

   - expand-up

   - expand-down

   - zoom-in

   - zoom-out

   - slide-left

   - slide-right

   - slide-up

   - slide-down

   - contract

```js

angular.module(xxxx)

  .config(function (laddaProvider) {

    laddaProvider.setOption({ 

      style: 'expand-left'

    });

  })

```

### controller

```javascript

  $scope.login = function() {

    // start loading

    $scope.loginLoading = true;

    loginService.login(function() {

      // stop loading

      $scope.loginLoading = false;

    });

  }

```

### view

basic

```html

  Login

```

change style of effect

```html

  Login

```

change size of spinner

```html

  Login

```

change color of spinner

```html

  Login

```

## Links

* [Ladda](http://lab.hakim.se/ladda/)

## Contributing

1. Fork it ( https://github.com/remotty/angular-ladda/fork )

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create a new Pull Request

### setup

```

$ bower install

$ npm install

$ node_modules/protractor/bin/webdriver-manager update

```

### test

```

$ gulp test

```

### build

```

$ gulp

```