voronianski / ngprogress-lite Goto Github PK

View Code? Open in Web Editor NEW

394.0 11.0 42.0 194 KB

Angular provider for slim progress bars

Home Page: http://labs.voronianski.dev/ngprogress-lite.js

License: MIT License

JavaScript 44.85% CSS 5.05% HTML 50.10%

ngprogress-lite's Introduction

ngprogress-lite

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.

Install

You can download ngprogress-lite.js manually or install it with bower:

bower install ngprogress-lite

or npm:

npm 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.

Usage

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()

Configuration

Provider is highly customizable, here is the list of some options that you can specify:

minimum - change the minimum percentage (defaults to 0.08)
speed - speed of transition animations (defaults to 300)
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;
	}]);

Customization

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)

References

Inspired by Google, YouTube, Medium, etc.

nprogress - original jQuery dependant solution

ngprogress-lite's People

Contributors

Stargazers

Watchers

ngprogress-lite's Issues

Please add package to bower

Please add package to http://bower.io/search/ and keep the newest version.

Progress bar doesn't display when using Bootstrap 2.3.2's navbar - SOLVED

Bootstrap's navbar-fixed-top class has z-index of 1030, so I increased the ngProgressLiteBar z-index from 100 to 1050 in ngprogress-lite.css. Now the progress bar is displaying correctly.

Hope this helps someone.

how to use with angulars http ajax

I would like to use this extension with angulars http. How would I apply?

Socket.io

Hi ,
I want to know if this conflicts with socket.io as i plan on using both in the same app.
Pace.js had the issue of interference with socket.io

How can I change the color of progress bar ?

Hi,

I want to change the default color of progress bar. Is there any way by which I can do that ?

Thanks

Allow on npm?

Hi,

Thank's for this. Is that possible to provide your package on npm?

Bests

$timeout dependency can be dropped

https://github.com/voronianski/ngprogress-lite/blob/master/ngprogress-lite.js#L77
https://github.com/voronianski/ngprogress-lite/blob/master/ngprogress-lite.js#L82
https://github.com/voronianski/ngprogress-lite/blob/master/ngprogress-lite.js#L84
https://github.com/voronianski/ngprogress-lite/blob/master/ngprogress-lite.js#L103

Angular $timeout service is special, because it also runs a digest cycle with $apply() method.
However, we only change css, but not the scope. This means we don't need to run $apply, because nothing has changed in the scope.
It would be better to change $timeout with native setTimeout.

Finish with error

Hey! Great plugin!

Right now I'm using it this way:

onRequest:
    progress.start()
onSuccess:
    progress.done()
onError:
    progress.done()

However, I would like to change the presentation of progress bar when request is resulted in error. In my case, I would like to color it as red, but when the next request starts I would like it to be blue again.

What is the best way to do this? Maybe this feature is worth adding to the module itself?

Thanks!

Can you add the CSS to the bower.json file?

Can you please add the CSS file to the bower.json file so that compiling from something like brunch or grunt is way easier?

jobs with different duration

As I have jobs with different durations (few seconds to a few minutes) I'd like to adjust the progress bar. I wonder if setting the trickleRate is the right place for adjusting the load progress?

Uglify mangle

Why uglify mangle option is set to false? Does it break something important in the code?

Position, any help?

Is it possible to have this progress bar appearing into a specific div?

How would you go about it?

Appreciate it.

multiple ajax requests

Hello, nice plugin!

In my case i do an normal ajax request to get some collection data from the server and furthermore an geolocation.getCurrentPosition request.

The progress should only reach 100% if both of them are done.

At the moment, i start and end every ajax request with a progress-bar, so i don't have to handle everything for myself every time again. For the currentPostionen request i have to start a "second" progress-bar. This resolves into one correct progress (short ajax request) and after that the second "done()" (position) kicks in and shows up for a short amount of time.

The plugin should add up progresses and resolve them only if all off them are resolved.

Thank you very much
Marcel

Bower requirements

How about changing "angular": "~1.0.8" requirement to "~1". I think this should be working on angular 1.2 version too, because it has only a few breaking changes.