JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
  <h1>Spinner Example</h1>
  <loading></loading>
  <div ng-repeat="car in cars">
    <li>{{car.name}}</li>
  </div>
  <button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>
   <button ng-click="closeMe()" class="btn btn-primary">Close</button>
</body>

CSS

/* Styles go here */
.loading {padding:20px; margin:40px 5px; width:80px;}

JavaScript

angular.module('myApp', [])
  .directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" /></div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })
  .controller('myController', function($scope, $http) {
      $scope.cars = [];
      
      $scope.clickMe = function() {
        $scope.loading = true;
        $http.get('test.json')
          .success(function(data) {
            $scope.cars = data[0].cars;
            $scope.loading = false;
        });
      }
      $scope.closeMe = function(){
          $scope.loading = false;
      }
  });