AngularJS How to Create a Loader

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. <meta charset="utf-8">
  4. <title>AngularJS How to Create a Loader</title>
  5. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  6. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  8. <link rel="stylesheet" type="text/css" href="style.css">
  9. </head>
  10. <body ng-controller="myController">
  11. <div class="container">
  12. <h1 class="page-header text-center">AngularJS How to Create a Loader</h1>
  13. <div class="row text-center">
  14. <h2>Using Font-awesome Spinner</h2>
  15. <button class="btn btn-primary" ng-click="showLoader()">{{ loadName }} <i class="fa fa-spinner fa-pulse" ng-show="fontloader"></i></button>
  16. <button class="btn btn-warning" ng-click="stopLoader()">Stop</button>
  17. </div>
  18. <hr>
  19. <div class="row text-center">
  20. <h2>Using .gif Image with $timeout</h2>
  21. <button class="btn btn-primary" ng-click="showImgLoader()">{{ gifName }}</button>
  22. <button class="btn btn-warning" ng-click="stopImgLoader()">Stop</button>
  23. </div>
  24. <div class="row text-center">
  25. <img src="loader.gif" ng-show="imgloader">
  26. </div>
  27. </div>
  28. <script src="angular.js"></script>
  29. </body>
  30. </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 :)

Add new comment