CODEWITHSUNDEEP
angularjsangular-http
yavg
yavg

Reputation: 3051

progress bar on web request ($http) AngularJS

I'm new in AngularJS. I'm trying to make a request to a web service. I would like to implement a progress bar that tells me what percentage this request. Maybe someone has a basic example of which can guide me. Greatly appreciate it if anyone can give me a hand with this. I will try to explain a little more. I have a request like this. I want you to show me the percentage from start to finish. I'm new, so I would like to find something simple but functional.

  $http({
    method: 'GET',
    url: "www.examplejson.com/example",
    timeout:5000
  }).success(function(data){
   console.log("complete!");
  }).error(function(response,status,headers,config) {
   console.log("error");
  });

Upvotes: 9

Views: 7997

Answers (4)

fikkatra
fikkatra

Reputation: 5792

There's no way to know the progress (percentage) of a simple HTTP request. When your request leaves the client, the first thing you'll hear from the server is the response, which also means he's done. So unless you're streaming something and you can progressively send the status from the server to the client, the only options are to:

  • estimate how much time the request will take, use this value to build the progress bar (of course, the progress bar will only be an approximation for the real waiting time)
  • just use a spinner.

I'd suggest the latter option.

Upvotes: 6

RJV
RJV

Reputation: 287

Try this one A slim, site-wide progressbar for AngularJS

Here

Upvotes: 0

MarcoS
MarcoS

Reputation: 17711

With angular-loading-bar/ it's eally easy: just download it 

bower install angular-loading-bar

and add it to your app.js dependencies:

angular.module('myApp', ['angular-loading-bar'])

and you're done... It will show a progress bar just on top of your innerHtml... And it will work not only with $http, but with any asynchronous call, since it works as a middleware interceptor...

Upvotes: 0

Iury Dias
Iury Dias

Reputation: 315

There is a lovely project called Angular Loading Bar.

http://chieffancypants.github.io/angular-loading-bar/

It's very easy to use and it shows a progress bar just below the address bar when you make a request. Try it out! With it, you CAN see the progress of the requests you make.

Upvotes: 2

Related Questions