Nice looking slim progress bars provider for Angular.js applications.
It has similar API as original popular jQuery plugin (see references) to keep things as simple as possible.
The only dependency is angular.js framework.
File size is ~2kb
when minified.
You can download ngprogress-lite.js
manually or install it with bower:
bower install ngprogress-lite
You will need only to include ngprogress-lite.css
and ngprogress-lite.js
to your project, and then you can start using ngProgressLite
provider in your controllers, services or directives.
For simple usage you can just call start()
and done()
, for example:
ngProgressLite.start();
$timeout(function () {
ngProgressLite.done();
}, 2000);
For more advanced usage you can set the number between 0
and 1
to set progress bar to specific state:
ngProgressLite.set(0.5);
ngProgressLite.set(1.0);
You can also increment the progress bar by random number (this will never get to 100%
):
ngProgressLite.inc();
Also it is possible to get current state number of a progress bar:
ngProgressLite.get()
Provider is highly customizable, here is the list of some options that you can specify:
minimum
- change the minimum percentage (defaults to0.08
)speed
- speed of transition animations (defaults to300
)ease
- type of transition easings- and even
template
- but it's not recommended though :)
Use ngProgressLiteProvider
settings object in module's config:
angular.module('yourModule', ['ngProgressLite'])
.config(['ngProgressLiteProvider', function (ngProgressLiteProvider) {
ngProgressLiteProvider.settings.speed = 1500;
}]);
If you want to change progress bar's look, you need just edit tiny ngprogress-lite.css
file. Feel free to rewrite it as you wish ;)
If you have some style issues, please be sure that ngprogress-lite.css
is not overwritten by other styles (e.g. z-index
Bootstrap's navbar - link)
Inspired by Google, YouTube, Medium, etc.
- nprogress - original jQuery dependant solution
(c) 2013 MIT License