JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<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;
    }
  });