AngularJS How to Create a Loader

Submitted by nurhodelta_17 on Wednesday, January 3, 2018 - 20:48.

Getting Started

I've used CDN for Bootstrap, Font-awesome and Angular JS so you need internet connection for them to work. The idea of loader is that when ever a certain event occurred, the loader will show. In this case of this tutorial, we're going to show the loader using ng-show on button click event.

index.html

This is our index which contains our buttons and loaders. In this tutorial, I have two loaders, one is font-awesome spinner and the second one is a .gif image. 
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>AngularJS How to Create a Loader</title>
  6.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  9.     <link rel="stylesheet" type="text/css" href="style.css">
  10. </head>
  11. <body ng-controller="myController">
  12. <div class="container">
  13.     <h1 class="page-header text-center">AngularJS How to Create a Loader</h1>
  14.     <div class="row text-center">
  15.     	<h2>Using Font-awesome Spinner</h2>
  16. 		<button class="btn btn-primary" ng-click="showLoader()">{{ loadName }} <i class="fa fa-spinner fa-pulse" ng-show="fontloader"></i></button>
  17. 		<button class="btn btn-warning" ng-click="stopLoader()">Stop</button>
  18. 	</div>
  19. 	<hr>
  20. 	<div class="row text-center">
  21.     	<h2>Using .gif Image with $timeout</h2>
  22. 		<button class="btn btn-primary" ng-click="showImgLoader()">{{ gifName }}</button>
  23. 		<button class="btn btn-warning" ng-click="stopImgLoader()">Stop</button>
  24. 	</div>
  25. 	<div class="row text-center">
  26. 		<img src="loader.gif" ng-show="imgloader">
  27. 	</div>
  28. </div>
  29. <script src="angular.js"></script>
  30. </body>
  31. </html>

angular.js

Lastly, this contains our Angular JS code. 
  1. var app = angular.module('app', []);
  2. app.controller('myController',function($scope, $http, $timeout){
  3. 	$scope.loadName = 'Save';
  4.     $scope.gifName = 'Save';
  5.  
  6.     //for font
  7.     $scope.showLoader = function(){
  8.         $scope.fontloader = true;
  9.         $scope.loadName = 'Saving...';
  10.     }
  11.  
  12.     $scope.stopLoader = function(){
  13.         $scope.fontloader = false;
  14.         $scope.loadName = 'Save';
  15.     }
  16.  
  17.     //for img
  18.     $scope.showImgLoader = function(){
  19.         $scope.imgloader = true;
  20.         $scope.gifName = 'Saving...';
  21.  
  22.         $timeout( function(){
  23.             $scope.stopImgLoader();
  24.         }, 5000 );
  25.     }
  26.  
  27.     $scope.stopImgLoader = function(){
  28.         $scope.imgloader = false;
  29.         $scope.gifName = 'Save';
  30.     }
  31.  
  32. });
That ends this tutorial. Happy Coding :)

Tags

Add new comment

About text formats
  • 172 views