Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<!-- this can be an image if you want -->
<p ng-show="loading">...LOADING...</p>
<!-- Showing the status -->
<p ng-hide="loading">{{status}}</p>
<button type="button" ng-click="upload()">Do $http request</button>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $timeout) {
$scope.status = 'Not started';
$scope.loading = false;
$scope.upload = function() {
$scope.loading = true;
// Simulating a http request with a timeout
$timeout(function(){
$scope.status = "Finished";
$scope.loading = false;
},3000);
}
}