JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<button ng-click="serviceCall()">Servie call</button>
<!-- loading icon -->
<div class="loading-spiner-holder" loading>
  <div class="loading-spiner"><img src="https://i.stack.imgur.com/oQ0tF.gif" width="28px" height="28px" alt="Loading..." />
  </div>
</div>
<div ng-bind="responseText|json">
</div>

CSS

/*loading spinner styling*/

.loading-spiner-holder {
  height: 100%;
  width: 100%;
  background: black;
  z-index: 99999;
  opacity: 0.6;
  position: fixed;
  top: 0;
  left: 0;
}

.loading-spiner {
  width: 28px;
  height: 28px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px;
  /* background: white; */
  border-radius: 4px;
}

JavaScript

angular
  .module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController)
  .directive('loading', loading);

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {

  $scope.serviceCall = function() {
    var root = 'https://reqres.in/api/users?delay=3';
    $http({
      url: root + '/photos',
      method: 'GET'
    }).then(function(data) {
      $scope.responseText = data.data;
      console.log(data);
    });
  };
}

loading.$inject = ['$http'];

function loading($http) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return $http.pendingRequests.length > 0;
      }, function(hasPending) {
        if (hasPending) {
          element[0].style.display = '';
        } else {
          element[0].style.display = 'none';
        }
      });
    }
  };
}