ember-loading-button

An Ember button component addon for Asynchronous actions with loading indicators.

Heavily inspired by this Ladda Buttons

Demo

Demo

Installation

• ember install ember-loading-button

Usage

With Default Loading indicator

{{#loading-button
       transition="expand-left"
       action=(action 'promiseAction')}}
       Submit
{{/loading-button}}

With an optional loading indicator

    {{#loading-button 
      loaderStyle="bars" 
      transition="expand-right" 
      action=(action 'promiseAction')}}
    Submit
    {{/loading-button}}

With customClass to override the styles

    {{#loading-button 
      transition="expand-down" 
      customClass="btn-warning" 
      action=(action 'promiseAction') }}
    Submit
    {{/loading-button}}

Properties

transition

The style for the loading indicator which indicates how and where the loader is placed within the button.

List of available styles:

• expand-left
• expand-right
• expand-down
• expand-up
• contract
• zoom-in
• zoom-out
• slide-left
• slide-right
• slide-up
• slide-down

action

Closure action parameter to execute when the button is clicked , will be returning a Promise based on which the button states are derived and the UI is rendered.

customClass

This will get the name of the custom class name with which you want to override your button styles.

size

Various size options for the button

List of available sizes:

• xs => Extra Small
• s => Small
• l => Large
• xl => Extra Large

loaderStyle

The type of loader you want to choose from:

• circular-dots-fade
• bars
• rotating-slice
• fading-circle
• scaling-circles
• trailing-dots
• horizontal-dots

Credits

• Hakim El Hattab for Ladda buttons
• Luke Haas for CSS loaders
• Lauren Tan for ember-async-button
• Mary Lou for the inspiration