Display progress (circle) while submitting bootstrap form using AngularJS

Question

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?

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

Answer 2

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