Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajasegar/ember-progress-button
Creative progress indicators for Ember async buttons
https://github.com/rajasegar/ember-progress-button
async buttons ember-addon emberjs progress-bar promises
Last synced: 2 months ago
JSON representation
Creative progress indicators for Ember async buttons
- Host: GitHub
- URL: https://github.com/rajasegar/ember-progress-button
- Owner: rajasegar
- License: mit
- Created: 2017-06-15T14:06:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T16:29:42.000Z (over 1 year ago)
- Last Synced: 2024-10-02T02:30:51.925Z (3 months ago)
- Topics: async, buttons, ember-addon, emberjs, progress-bar, promises
- Language: JavaScript
- Homepage: https://rajasegar.github.io/ember-progress-button/
- Size: 1.03 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-progress-button
[](https://travis-ci.org/rajasegar/ember-progress-button)
[](https://www.npmjs.com/package/ember-progress-button)
[](https://npmjs.org/package/ember-progress-button "View this project on npm")
[](http://opensource.org/licenses/MIT)
[](http://emberobserver.com/addons/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](https://tympanus.net/codrops/2013/12/12/progress-button-styles/)
## Demo
[Demo](https://rajasegar.github.io/ember-progress-button/)
## Installation
```shell
ember install ember-progress-button
```
## Usage
```hbs
{{#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.
```css
: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:
```css
.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:
```css
.progress-button {
/* Put your styles here */
}
```
## Running
* `ember serve`
* Visit your app at [http://localhost:4200](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/](https://ember-cli.com/).
## Credits
* [Codrops](https://tympanus.net/codrops)
* [Mary Lou](https://github.com/crnacura)