Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
org.webjars.bower:github-com-akveo-angular-progress-button-styles
Advanced tools
WebJar for angular-progress-button-styles
AngularJS version of Codrops progress buttons. I've also made less and sass versions of it besides css.
Check out Live demo!
Install bower package:
bower install --save angular-progress-button-styles
Include scripts and styles (I use FontAwesome for success and error icons, but you can override it):
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css">
<script type="text/javascript" src="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js"></script>
Add angular module dependency:
var app = angular.module('app', ['angular-progress-button-styles']);
Add directive to the button element!
<button progress-button="someFunctionThatReturnsPromise()">Submit</button>
That's it! Enjoy the plugin!
The directive itself takes as a parameter callback function, that returns promise after execution. If function returns value progress completes instantly. You can configure plugin using two different ways:
Here is a list of supported HTML attributes and their meaning:
Attribute | Available values | Meaning |
---|---|---|
pb-style |
| Defines button appearance. Default value is fill. |
pb-direction |
| To be used with pb-style=(fill or shrink). Defines the direction of the progress bar. Default value is horizontal. |
pb-random-progress |
| Runs random fill function from the moment button is clicked till promise is resolved. Default value is true. |
pb-profile | String value | The profile from which to fetch configuration during the button initialization. For more information look JS configuration section |
For those ones, who don't like to have a lot of configuration in HTML as well to prevent the copy-paste there also is possibility to define configuration in Javascript using profiles.
To do this, you need to inject progressButtonConfigProvider
during the app configuration:
mdl.config(function(progressButtonConfigProvider) {
progressButtonConfigProvider.profile('testProfile', {
style: 'shrink',
direction: 'vertical'
});
});
In this example new profile called 'testProfile' created. You can then apply it to you button like this:
<button progress-button="someFunctionThatReturnsPromise()" pb-profile="testProfile">Submit</button>
This would create new button with style shrink and vertical direction.
You can as well define default profile, that will be applied to all the buttons across your application:
progressButtonConfigProvider.profile({
style: 'shrink',
direction: 'vertical'
});
MIT license.
You are welcome to contribute. Feel free to contact me.
Special thanks for contribution:
FAQs
WebJar for angular-progress-button-styles
We found that org.webjars.bower:github-com-akveo-angular-progress-button-styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.