0

I have form I am building using bootstrap, and it's submitting data to remote server using $http, but there's a time delay in the middle.

I'd like to know how to implement a progress (circle in the middle of the page) to let the user know the form is being submitted, is there a functionality using Angular UI services? I have searched for that and didn't find. Or should I implement this using bootstrap?

David Hemsey
  • 277
  • 3
  • 11
  • you could just display a gif image while the request is running. – toskv Sep 27 '15 at 14:55
  • you can also have a look at this: https://github.com/jfeigel/ngLoader – toskv Sep 27 '15 at 14:55
  • I recommend looking into Angular Material. There's a nice directive just for that: https://material.angularjs.org/latest/#/api/material.components.progressCircular/directive/mdProgressCircular – manonthemat Sep 27 '15 at 15:11
  • You cannot measure the progress event unless it has a `lengthComputable` property. Check https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent/lengthComputable .... if your are uploading a file in your form submission your could try implementing a progress event listener. Check this http://stackoverflow.com/a/22987941/1055987 for more – JFK Sep 27 '15 at 16:22
  • Thanks everyone. I need to support all browsers, so the ng-loader doesn't work for IE (I hope people stop using it and requiring it). The md-progress-circular looks like what I want, I'll give it a reading and a try and get back to you with any questions – David Hemsey Sep 27 '15 at 20:23
  • 1
    @manonthemat thanks for the tip, it worked fine, if you can include your comment as an answer so I can mark it. – David Hemsey Sep 27 '15 at 20:59

2 Answers2

1

I recommend looking into Angular Material. There's a nice directive just for that: https://material.angularjs.org/latest/#/api/material.components.progressCircular/directive/mdProgressCircular

As requested by David Hemsey, this is my previous comment as an answer.

manonthemat
  • 6,101
  • 1
  • 24
  • 49
0

you can reuse these.. angular-spinner or angular-sham-spinner

BLOG about how the spinner works with angularjs

or if you want to do it yourself...

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

i havent tested the code but directive wont be more complex than this...

harishr
  • 17,807
  • 9
  • 78
  • 125