角度加载动画(Angular loading animation)

我只是想知道是否有人可以帮助我。 我正在写角度应用程序和我堆栈。 我在服务器端使用php和MySQL，一切都很棒。 所有http请求都在服务中。 有时，当请求大量数据或响应需要一段时间时，原因是前端有延迟。 我已经使用svg在css中设计了加载动画。 我不知道如何实现它我的应用程序。 当数据从服务器传入时，理想的效果是显示加载器。

我不是要求现成的解决方案，而是要求在我的应用程序中实现它的最佳实践的一些建议。

以下是我的登录服务示例。

'use strict';

app.factory('loginService', function($http, $location, sessionService) {
	// Service must return
	return {
		login: function(user, scope) {
			// Send credential to the server
			var $promise = $http.post('http://localhost:8888/myApi/api/login/user.php', user);
			$promise.then(function(msg) {
				var uid = msg.data;
				if(uid) {
					if(uid.status == 'success') {
						//scope.msgtxt = uid.response.success;
						sessionService.set('uid', uid.session);
						$location.path('/home');						
					} else {
						scope.msgtxt = uid.error;
					}
				} else {
					$location.path('/login');
				}
			})
		},
		logout: function() {
			sessionService.destroy('uid');
			$location.path('/login');
		},
		islogged: function() {
			var $checkSessionServer = $http.post('http://localhost:8888/myApi/api/login/check_session.php');
			return $checkSessionServer;
		}
	}
}); 
  
 
I just wondering if anyone could help me. I am writing angular app and I stack. I'm using php and MySQL on the server side and all works great. All the http requests are in the services. Sometimes when large amount of data is requested or response is taking a while for what ever reason there is a delay on the front end. I already have loading animation designed in css with use of svg. I have no clue how to implement it it my app. Desirable effect would be to display loader when data is incoming from the server.
 
I am not asking for ready solution but for some advice on what is the best practice to implement it within my app.
 
Below is example of my login service.
 
 
 
  
  
'use strict';

app.factory('loginService', function($http, $location, sessionService) {
	// Service must return
	return {
		login: function(user, scope) {
			// Send credential to the server
			var $promise = $http.post('http://localhost:8888/myApi/api/login/user.php', user);
			$promise.then(function(msg) {
				var uid = msg.data;
				if(uid) {
					if(uid.status == 'success') {
						//scope.msgtxt = uid.response.success;
						sessionService.set('uid', uid.session);
						$location.path('/home');						
					} else {
						scope.msgtxt = uid.error;
					}
				} else {
					$location.path('/login');
				}
			})
		},
		logout: function() {
			sessionService.destroy('uid');
			$location.path('/login');
		},
		islogged: function() {
			var $checkSessionServer = $http.post('http://localhost:8888/myApi/api/login/check_session.php');
			return $checkSessionServer;
		}
	}
});