ember-loading-button
An Ember button component addon for Asynchronous actions with loading indicators.
Heavily inspired by this Ladda Buttons
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