some tweaks

Author: Matan SarSha

example/app.js

@@ -3,13 +3,17 @@
         .module('app', ['sarsha.spinner'])
         .controller('appCtrl', function (spinnerService) {
             this.spinner = spinnerService;
+            this.data = [];
+            initData.bind(this)();
 
-            this.open = function (name) {
-                spinnerService.show(name);
-            }
-
-            this.close = function (name) {
-                spinnerService.close(name);
+            function initData() {
+                for (var i = 0; i < 8; i++) {
+                    this.data.push({
+                        title: 'title ' + i,
+                        data: 'data ' + i,
+                        date: new Date()
+                    })
+                }
             }
         })
 })();

example/index.html

@@ -12,10 +12,18 @@
             margin: 15px auto;
             color: red;
         }
-
-        sarsha-spinner span{
+        
+        sarsha-spinner span {
             display: block;
         }
+        
+        table {
+            margin-top: 15px;
+        }
+
+        table td{
+            padding: 10px;
+        }
     </style>
 </head>
 
@@ -24,8 +32,10 @@
         <button ng-click="$ctrl.spinner.showAll()">show all</button>
         <button ng-click="$ctrl.spinner.closeAll()">close all</button>
     </div>
-    <button ng-click="$ctrl.open('spinner1')">open 1</button>
-    <button ng-click="$ctrl.close('spinner1')">close 1</button>
+    <div>
+        <button ng-click="$ctrl.spinner.show('spinner1')">open 1</button>
+        <button ng-click="$ctrl.spinner.close('spinner1')">close 1</button>
+    </div>
     <div class="content">
         <div>
             <span>Content 1</span>
@@ -35,11 +45,26 @@
             <span>Whoo hoooo !</span>
         </sarsha-spinner>
     </div>
-    <button ng-click="$ctrl.open('spinner2')">open 2</button>
-    <button ng-click="$ctrl.close('spinner2')">close 2</button>
-    <div class="content">
+    <button ng-click="$ctrl.spinner.show('spinner2')">open 2</button>
+    <button ng-click="$ctrl.spinner.close('spinner2')">close 2</button>
+    <div>
         <sarsha-spinner name="spinner2"></sarsha-spinner>
-        Content 2
+        <table>
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Data</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr ng-repeat="row in $ctrl.data">
+                    <td>{{row.title}}</td>
+                    <td>{{row.data}}</td>
+                    <td>{{row.date | date}}</td>
+                </tr>
+            </tbody>
+        </table>
     </div>
     <script src="../node_modules/angular/angular.js"></script>
     <script src="../node_modules/angular-animate/angular-animate.min.js"></script>

src/loading-spinner.css

@@ -4,7 +4,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(227, 223, 223, 0.47);
+    background: rgba(227, 223, 223, 0.67);
     z-index: 99999;
     color: white; 
     text-align: center;
@@ -40,7 +40,7 @@
 }
 
 .spinner > div {
-  background-color: #333;
+  background-color: #6795b4;
   height: 100%;
   width: 6px;
   display: inline-block;

src/loading-spinner.js

@@ -31,7 +31,7 @@
                 var parent = elm.parent();
                 var parentPosition = parent.position;
 
-                var spinnerScope = {
+                var spinnerContext = {
                     show: show,
                     close: close
                 }
@@ -47,7 +47,7 @@
                     scope.active = false;
                 }
 
-                spinnerService.register(scope.name, spinnerScope);
+                spinnerService.register(scope.name, spinnerContext);
             }
         }
     }
@@ -89,8 +89,8 @@
             }
         }
 
-        function register(name, spinnerScope) {
-            spinners[name] = spinnerScope;
+        function register(name, spinnerContext) {
+            spinners[name] = spinnerContext;
         }
 
         function unregister(name) {