ember-progress-button

Better User experience with asynchronous actions using Buttons with stylish progress indicators. This can be used as an aesthetic alternative to ember-async-button

The underlying thing which drives the component click action is a Promise just like your ember-async-button, but it will show you a progress indicator until the promise object is fulfilled, resolved or rejected.

Hence here you need NOT to specify different texts for different promise states but it will show indications through progress, success and error animations for pending, resolved and rejected states respectively.

Based on the stylish progress button styles by Codrops Article

Demo

Demo

Installation

ember install ember-progress-button

Usage

{{#progress-button action=(action 'promiseAction') style="shrink"}}Submit{{/progress-button}}

Properties

Ember progress buttons take only two properties:

• action => for the action performed when you click the button
• style => the type of progress bar you want on the button

Styles

Ember progress buttons come with about 18 different styles for progress indications. Just give any one of the following values for the style attribute of the component.

• fill (default)
• fill with vertical=true
• shrink
• shrink with vertical=true
• rotate-angle-bottom
• rotate-angle-top
• rotate-angle-left
• rotate-angle-right
• rotate-side-down
• rotate-side-up
• rotate-side-left
• rotate-side-right
• rotate-back
• flip-open
• slide-down
• move-up
• top-line
• lateral-lines with vertical=true

Some of the above styles may require the vertical attribute set to true such as fill, shrink and lateral-lines.

Theme Customization

You can customize the button css colors suiting your choice and preference using the following css variables.

:root {
    --progress-button-bg: #1d9650; /* Button background color */
    --progress-button-fg: #fff; /* Button text color */
    --progress-bar-bg: #0e7138; /* Progress bar color */
}

For over-riding the Success and Error state icons, you can use any icon fonts and override the below classes. Say for example , you want to use font-awesome icons, just set the font-family to font-awesome and modify the before and after properties like:

.progress-button .content::before,
.progress-button .content::after  {
	font-family: "font-awesome";
}

.progress-button .content::before {
	content: "\e600"; /* Checkmark for success */
}

.progress-button .content::after {
	content: "\e601"; /* Cross for error */
}

To have full control for the button appearance you can write your own styles for the button class:

.progress-button {
  /* Put your styles here */
}

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.

Credits

• Codrops
• Mary Lou