Creative progress indicators for Ember async buttons
MIT License
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
ember install ember-progress-button
{{#progress-button action=(action 'promiseAction') style="shrink"}}Submit{{/progress-button}}
Ember progress buttons take only two properties:
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.
Some of the above styles may require the vertical attribute set to true such as fill, shrink and lateral-lines.
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 */
}
ember serve
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.