<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body ng-controller="myController"> <div class="container"> <div class="row text-center"> </div> <hr> <div class="row text-center"> </div> <div class="row text-center"> <img src="loader.gif" ng-show="imgloader"> </div> </div> </body> </html>
var app = angular.module('app', []); app.controller('myController',function($scope, $http, $timeout){ $scope.loadName = 'Save'; $scope.gifName = 'Save'; //for font $scope.showLoader = function(){ $scope.fontloader = true; $scope.loadName = 'Saving...'; } $scope.stopLoader = function(){ $scope.fontloader = false; $scope.loadName = 'Save'; } //for img $scope.showImgLoader = function(){ $scope.imgloader = true; $scope.gifName = 'Saving...'; $timeout( function(){ $scope.stopImgLoader(); }, 5000 ); } $scope.stopImgLoader = function(){ $scope.imgloader = false; $scope.gifName = 'Save'; } });