JSFiddle - React, Tailwind, and code Playground

by sunnycyk

HTML

<body ng-app='myApp'>
    <div ng-controller="SampleCtrl">
          <button ng-click="sampleAction();">Click to Load</button>
          <spin-loading loaded="loaded">
             <div>{{ loadedContent }}</div>
          </spin-loading>
    </div>
 </body>

CSS

#loader {
    position: relative;
    width: 100%;
    height:100%;
}
#circularG{
position:fixed;
width:50px;
height:50px;
left: 50%;
top: 50%;
}
 
.circularG{
position:absolute;
background-color:#5C8AE6;
width:11px;
height:11px;
-moz-border-radius:8px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:0.96s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:8px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:0.96s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:8px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:0.96s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:8px;
-o-animation-name:bounce_circularG;
-o-animation-duration:0.96s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:8px;
animation-name:bounce_circularG;
animation-duration:0.96s;
animation-iteration-count:infinite;
animation-direction:linear;
}
 
#circularG_1{
left:0;
top:20px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
 
#circularG_2{
left:5px;
top:5px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
 
#circularG_3{
top:0;
left:20px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
 
#circularG_4{
right:5px;
top:5px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}
 
#circularG_5{
right:0;
top:20px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-ms-animation-delay:0.84s;
-o-animation-delay:0.84s;
animation-delay:0.84s;
}
...

JavaScript

var app = angular.module('myApp', []);
app.controller('SampleCtrl', ['$scope', 'sampleService', function($scope, sampleService) {
    $scope.loaded = true;
    $scope.loadedContent = null;
    
    $scope.sampleAction = function() { // Sample Action that will call the API server
      $scope.loaded = false;
         
      sampleService.get(function(data) {
        $scope.loadedContent = data;
        $scope.loaded = true;
      }, function(err) {
        $scope.loaded = true; // receive error, but also need to stop the spinner
      });
    };
    
  }]);
app.factory('sampleService', ['$q', '$timeout', function($q, $timeout) {
    
    var getMessages = function() {
       var deferred = $q.defer();

       $timeout(function() {
         console.log('solved');
         deferred.resolve("I have been loaded! Hello World");
       }, 5000);
      return deferred.promise;
    };

    return {
        get: getMessages().then
    };
}]);
app.directive('spinLoading', [function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {
                loaded: '=loaded'
            },
            templateUrl: 'directives/spinLoading/spinLoading.html'
        };
    }]);
app.run(["$templateCache", function($templateCache) {
  $templateCache.put("directives/spinLoading/spinLoading.html",
    "<div>\n" +
    "    <div id=\"loader\" ng-hide=\"loaded\">\n" +
    "        <div id=\"circularG\">\n" +
    "            <div id=\"circularG_1\" class=\"circularG\">\n" +
    "            </div>\n" +
    "            <div id=\"circularG_2\" class=\"circularG\">\n" +
    "            </div>\n" +
    "            <div id=\"circularG_3\" class=\"circularG\">\n" +
    "            </div>\n" +
    "            <div id=\"circularG_4\" class=\"circularG\">\n" +
    "            </div>\n" +
    "            <div id=\"circularG_5\" class=\"circularG\">\n" +
    "            </div>\n" +
    "            <div id=\"circularG_6\"...