0

I actually need to implement something like the below template.

That load spinner is possible with ng-show and ng-hide of loading.gif incase of not needing percentage but I need percentage of load to.

That load spinner alone is possible with ng-show and ng-hide of loading.gif incase of not needing percentage but I need percentage of load too on account of start and completion of $http rest service.

Lalitha
  • 281
  • 1
  • 2
  • 12
  • 1
    I see the jquery tag. if so, you could make use of the progress-events of xmlhttprequest2 object. – Iceman Aug 12 '16 at 04:29
  • Possible duplicate of [Angular 1.5.4 $http progress event](http://stackoverflow.com/questions/36622826/angular-1-5-4-http-progress-event) – Iceman Aug 12 '16 at 04:46

1 Answers1

2

One way I see this is through jQuery's jquery.ajax.progress.js

The code to print progress in console is:

$.ajax({
    url: "./json.js",
    type: "GET",
    dataType: "json",
    complete: function() { console.log("Completed."); },
    progress: function(evt) {
        if (evt.lengthComputable) {
            console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    }

});

See this github page for more info.

Raman Sahasi
  • 30,180
  • 9
  • 58
  • 71
  • 1
    When I tried $http.get(url).progress(function(evt){ console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%"); }); I received error like '$http.(..).progress() isnot a function. – Lalitha Aug 12 '16 at 05:53
  • you can't use `.progress()` on `$http`. Understand the difference. `$.ajax` is jQuery code and `$http` is `angularjs`'s object. BOTH ARE DIFFERENT. – Raman Sahasi Aug 12 '16 at 06:06