chieffancypants / angular-loading-bar Goto Github PK

I really like the seamless nature of this module - I'd love it if the maximum "not yet loaded" value could be set via a config.

Why? Because I noticed that it stops around the end if it's not done, I'd prefer it to slow down at 75% and go really slow instead of reaching the very end.

I think it only makes sense for longer calls. When it's finally done it does the rest 25% percent in a really quick animation.

Thank you

We are testing by setting this.parentSelector = 'div.myclass' or '#div_with_id'. The spinner is still appending to the top of the page (our ng-app call is not on body however) - would be nice to be able to get it to append to a specific element (like in a tab or panel-container). angular-busy has this functionality.

Hi,

As convention, the main section in bower.json should list all the artifacts that the library contains and should point to the non-minified version.

The line:
"main": "build/loading-bar.js"
should be changed to:
"main": ["src/loading-bar.js", "src/loading-bar.css"]

The bar should only appear when there is noticeable latency. Displaying the bar on every XHR request gets repetitive, and serves very little purpose on those quick ~20ms calls.

This change will likely break lots of tests

What is the rest of this sentence???? https://github.com/chieffancypants/angular-loading-bar/blob/master/src/loading-bar.js#L125

In my application on all pages loading works correctly, but on one of the pages have nested views (recursive) and progress is not completed

I load nested views with cache
$http.get('views/' + $parse(attrs.data)(scope) + '.html', {
cache: $templateCache
}).success(function(tplContent) {
elm.replaceWith($compile(tplContent)(scope));
});

I made a log of variables and it turns out that the responses of more than queries

response:0
total:5
response:1
total:5
response:2
total:5
response:3
total:5
response:4
total:11
response:5
total:17
response:6
total:17
response:7
total:17
response:8
total:17
response:9
total:17
response:10
total:17
response:11
total:17
response:12
total:17
response:13
total:17
response:14
total:42
response:15
total:42
response:16
total:42
response:17
total:42
response:18
total:42
response:19
total:42
response:20
total:42
response:21
total:42
response:22
total:42
response:23
total:42
response:24
total:42
response:25
total:42
response:26
total:42
response:27
total:42
response:28
total:42
response:29
total:42
response:30
total:42
response:31
total:42
response:32
total:42
response:33
total:42
response:34
total:42
response:35
total:42
response:36
total:42
response:37
total:42
response:38
total:42
response:39
total:42
response:40
total:42
response:41
total:42
complete:42

response:0
total:0
response:1
total:0
response:2
total:0
response:3
total:0
response:4
total:0

if i remove cache attr from view loading directive all works fine

Maybe change reqsCompleted === reqsTotal to reqsCompleted >= reqsTotal?

Is there anyway to disable a button while the loading bar is active?

Something like:

<button ng-disabled="loadingBarActive">Save</button>

It sometimes stays there after finishing loading, even if the DOM nodes were removed..

Browser bug ?

doesn't work at all when using ngAnimate

Is their a simple way to set extra divs or otherwise veil the background while the spinner works?

e.g.:

#veil {
  height:100%;
  width:100%;
  filter: alpha(opacity=60);
  opacity: 0.6;
  background: #000000;
}

This really what i was searching for, thanks for making this and sharing
Sincerely, your fan

Hey guy, respect your work a lot.

Since your loading-bar project is gaining some popularity and more people start using it, perhaps it's time to start versioning? Because right now, I don't know if my earlier downloaded version is outdated and by how much. The current procedure is to check your repo to see if it has (many) commits after the last time I downloaded a copy.

Maybe a change log to go along with releases too?

Hi, I tried to use your loading-bar with ionic and phonegap. The bar is not shown as a single line, but with some white "ice" effect. Do you know how to turn that off?

I changed the position (top: 50px) intentionally.

Hi,

In some of my controller tests the angular loading bar is causing errors. e.g. it fails because there is no body element.

To avoid this I'd like to turn off the loading bar functionality completely. For the moment I'm doing the below:

var noop = function(){};
var cfpLoadingBar = {
     start: noop,
     set: noop,
     status: noop,
     inc: noop,
     complete: noop,
     includeSpinner: false,
     parentSelector: false
};
$provide.value('cfpLoadingBar', cfpLoadingBar);

This is a bit clunky. It would be nice if there was a way to do this provided by the module itself.

Hi there,

Is it possible to ignore spinner somehow?
I would like to have spinner only on some pages.
I see that there is an option to ignore loading bar for some requests, but I'm not sure if that can be done for spinner also?

Hi, when you put other interceptors then dont works, was my fault close pls i mooron 👍

Hey there, on the project I'm doing I'm hoping to use this lib, and I want the spinner, but the default location doesn't make much sense for me.

I'm going to fork the project and make the spinner location configurable. If you'd like me to do a pull request when that's done I'd be happy to do so, just let me know! Cheers

edit: I realized how non-trivial this is with the current method (using jqlite to select the element parents). For my own project I put together a really simple directive for the spinner that turns on/off based on the events that this project's interceptors already fire. If you'd be interested in a pull request for that feature let me know, it's working fine in my own project.

Work just fine in Chrome but can't get it work on Firefox

I have used this service in one of my web application, when I open in my iPad safari, the loading bar is in the middle of the page. how can we fix this?

Thank you

Try to only include angular.module('myApp', ['cfpLoadingBar']) in the app.

But there is an error that no module cfpLoadingBar in source code. It seems to need to include chieffancypants.loadingBar module to use it.

cfpLoadingBar is a provider of chieffancypants.loadingBar, so we might not can use cfpLoadingBar as a module.

Thank you so much

Ben

You should include this in their database: http://ngmodules.org/modules?query=angular-loading-bar

BTW, thanks for building this, it's just what I was looking for!!

very nice component! Any tutorial how to integrate it with the Restangular?

You could provide the css as a less file. I had to rename it to less to bundle all my css to one file.

I am using angular 1.0.8

From console logs, this is the error message I got,

Cannot call method 'push' of undefined from chieffancypants.loadingBar

on loading-bar.js:123

Is there a way to have it ignore loading on certain pages but not the entire factory/service? I'd like to disable loading based on wether the users are at /welcome or /login etc.

Currently, loading bar is preprended to the body element.
Would be awesome to choose where it could instantiate.
Thanks for the cool module

Would it be possible to add a new event firing before the actual cfpLoadingBar:started (something like cfpLoadingBar:beforeStart)? Then check if that new event was default prevented and eventually cancel the start sequence?

Use case: We have a quite huge web app with multiple iframes all running our slightly modified angular app with selected modules. I would like to show the loading bar for requests from all iframes but only in the main parent iframe / app (in one place). So with the new event, I could maybe catch all the start attempts, cancel them and manully send message only to the top parent iframe / app.

Or maybe let us use more comprehensive "parent selector" (so one could address window.top and then whatever he likes)?

I would implement this, but my schedule is tight now and it's a low prio, so if no one will do this, I will... someday. :)

Hi!

I've updated my angular version to 1.2.9 today and I realize that the animation doesn't fadeOut... it seems that the latests changes on ngAnimate module broke some code into angular-loading-bar.

I'll take a look on the source soon but it's good to report if someone else want to take a look.

ngAnimate doesn't work on elements outside the main bootstrapped ng-app element.

The loading indicator doesn't show up when the browser is in full screen.

I try change the design and move the bar from top, but some bug appears at the end of stick. It goeas from start to the end. (See image)

Second issue, I want move the bar from end page to other location in html. Is there any functionality to move the bar from bottom to specified element?

We stop animating the progress bar at a certain point (currently 97%). At this point we should start animating the peg to keep users engaged.

Maybe, we can modify this for $on( '$routeChangeStart' and $routeChangeSuccess? Is it possible for that?

I understand it's rotated to show a kind of a bullet.. but moved 40 pixels down (to show under a navbar for example) looks weird.

I shortened the thing to 10px.. so it's not as "roundy" but at least looks ok in my setting.

i have a dashboard like site with many panels in one page
each panel is associated with a controller that can make some $http requests
i want to show the loading bar on top of each panel (not top of page) if that panel has some pending $http requests.

is this possible to achieve with this project?

I've noticed that the loading bar hangs around indefinitely when any http error occurs. It looks like the responseError interceptor should handle completing failed requests so that the loading bar will vanish, but it appears the interceptor has an error of its own.

When I have an HTTP error I see the HTTP error in my console, but I also get an additional error as follows:

TypeError: Cannot read property 'method' of undefined
    at isCached (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:8:14178)
    at responseError (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:8:15198)
    at wrappedErrback (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:3:30504)
    at eval (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:3:32036)
    at Scope.$eval (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:4:6956)
    at Scope.$digest (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:4:4994)
    at Scope.$apply (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:4:7380)
    at done (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:3:6376)
    at completeRequest (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:3:10106)
    at XMLHttpRequest.xhr.onreadystatechange (eval at <anonymous> (https://test/js/_libraries/jquery/jquery-1.7.1.js:2:11530), <anonymous>:3:11039) undefined 

When I comment out your code in the responseError interceptor and simply call setComplete() the loading bar vanishes when a responseError occurs, but this is much less graceful when there are multiple requests and only one of them fails.

This is using Angular 1.2.13 and release 0.3.0 of your loading bar.

Apologies for asking what is probably an Angular question. 😬 , but I wish I could see how to duplicate that Redit fade in. I set my my CSS:

  .fade_panel {
    transition: 1.75s ease-in-out all;
  }
  .fade_panel.ng-enter {
    opacity: 0;
  }

and my html:

  .listing-proposals
    %ul.fade_panel( ng-repeat='proposal in proposals' )
      %li.tree_container( ng-click='showProposal(proposal)' )
        .topic.row
          .list-avatar.col-xs-1

and ngAnimate:

window.App = angular.module('spokenvote', [ 'ngRoute', 'angular-loading-bar', 'ngAnimate', 'spokenvote.services', 'spokenvote.directives', 'templates', 'ui', 'ui.bootstrap' ]).config(appConfig)

But the results just plunk in, no nice gentle fade in like you have.

See anything obvious I'm missing by chance?

With angularjs 1.2.x ng-animate became redundant in the face of CSS3 transitions.

For example with bootstrap's .fade and .in style classes, the now preferable approach is to simply use ng-class:

<div class="fade" ng-class="{in: someScopeValue}"></div>

CSS3 will take care of the rest.

The real reason I'm asking is because right now ng-animate is breaking my transitions and if I remove it, loading-bar doesn't seem any different to me.

see #15

Hi,
I tried to move the loading bar a little lower and I ran into the following issue (with latest Chrome/Canary/FF):
Here's my css:

#loading-bar .bar {
   top: 70px;
}

And here's a screen capture of the issue.

Do you have any idea where this could stem from and how to fix it?

I have a situation in which multiple requests start simultaneously and cascade new requests on their own.

Because of the initial small requests, loading-bar gets to 100% within a second. Within 500ms of completing the request, new calls are fired away, which actually take most of the time. The progress bar however does not reset or reflect work to be done: it just stays on 100% until finally the last requests are finished. In effect the prograss bar is stuck at 100% almost at the beginning for several seconds.

One solution it to keep setting the progress, even in the 'request' function around line 94:

      return {
        'request': function(config) {
          if (!config.ignoreLoadingBar && !isCached(config)) {
            if (reqsTotal === 0) {
              cfpLoadingBar.start();
            }
            reqsTotal++;
            cfpLoadingBar.set(reqsCompleted / reqsTotal); // added this line
          }
          return config;
        },

The downside of this is it does not take into account the previous requests being completed: it just starts over.

Demo site mentions to use chieffancypants.loadingBar as the module name, where as the Readme says it as angular-loading-bar.

While certainly both are working, but it is somewhat confusing for getting-started devs, especially when they are testing in local and response is coming very quick and the loading bar didn't show up. I can guess this might be for backward compatibility reasons, recommending one would be make it more uniform.

It is also worth mentioning the delay the progress bar made visible after. I assume the progress bar is not showing up immediately, at least not for me. People will try delaying the response (ex: placing debug) and can see the loading bar in action. Otherwise someone else could think the loading bar is not coming because of incorrect module name usage (one of the two module names mentioned in docs)

I see a way to ignore loading bar when using $http service. What about $resource? In my current app logic, I would like to ignore loading-bar on POST, but keep it on GET.

Just wondering where in the code I would look to see where it monitors all outgoing requests and knows when they get resolved.

Hello,

is it possible to use loading bar while a file (generated by the server) is downloading?
The file download could take 5-10 secs and I'd like to show loading bar meanwhile

thanks

This will aid in debugging as src may not always be the same as the built files

There is already npm and bower....
Could you add NuGet as well please?

In Bootstrap 3 the default z-index for .navbar-static-top is 1000 and the #loading-bar-spinner's z-index is 100. So if you're using a .navbar-static-top as you navigation header, the spinner will not be visible unless you change its z-index to >= 1001.

Not a big deal obviously, just thought I'd mentioned in case someone gets stuck.

[edited] chieffancypants pointed out I meant to say to set the spinner's z-index >= to 1001, not <= 1001

I was just wondering if the 401 responses not making it to my interceptor could be a result of something a bit weird going on in the angular-loading-bar stuff?