Create and maintain a loadbar while a function is called

Question

I need to create a loadbar and leaves it active until the function is finished. I can do this at the angle?

$scope.getPosts = function () {
    $http({
        method: 'POST',
        url: '/getPosts',
    }).then(function(response) {
        return response.data;
    }, function(error) {
        console.log(error);
    });
};

Answer 1

Yes, it is possible.

Basically you will control the "Loader" using the directive ng-if.

Take an example:

angular.module('app', []).controller('mainController', mainController);

function mainController($http) {
  let ctrl = this;
  ctrl.loading = false;

  ctrl.iniciar = () => ctrl.loading = true;
  ctrl.parar = () => ctrl.loading = false;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController as main">
  <div ng-if="main.loading">
    Carregando <br>
    <i class="fa fa-spinner fa-spin"></i>
  </div>
  <button ng-click="main.iniciar()">Iniciar</button>  
  <button ng-click="main.parar()">Parar</button>
</div>