Added z-index

Author: stanleygu

Gruntfile.js

@@ -39,7 +39,7 @@ module.exports = function(grunt) {
       options: {
         port: 9000,
         // Change this to '0.0.0.0' to access the server from outside.
-        hostname: 'localhost'
+        hostname: '0.0.0.0'
       },
       demo: {
         options: {
@@ -127,6 +127,7 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('serve', [
+    'build',
     'connect:demo:keepalive'
   ]);
 

README.md

@@ -13,7 +13,7 @@ angular.module('myApp', ['stanleygu.spinners']);
 Invoke the directives with the desired attributes
 ```html
 <spinner template="{{type}}" color="{{color}}" screen-color="{{screenColor}}" screen-opacity="{{screenOpacity}}" 
-loading="{{loading}}"></spinner>
+loading="{{loading}}" z-index="200"></spinner>
 ```
 
 `template` is a string containing one of 7 different spinner types:
@@ -35,3 +35,5 @@ loading="{{loading}}"></spinner>
 `color` and `screen-color` are CSS color names for the spinner color and background screen color, respectively.
 
 `opacity` is a number from 0-1 for the screen opacity.
+
+`z-index` is the z-index of the spinner.

dist/index.html

@@ -25,7 +25,7 @@ <h1>Angular Spinners
       <img data-src="holder.js/200x300">
       <img data-src="holder.js/190x300">
       <spinner template="{{type}}" color="{{color}}" screen-color="{{screenColor}}" screen-opacity="{{opacity/100}}"
-      loading="{{loading}}"></spinner>
+      loading="{{loading}}" z-index="200"></spinner>
     </div>
     <div style="width:800px; margin:0 auto;">
       <form class="form-horizontal">

dist/spinners.js

@@ -10,7 +10,8 @@ angular.module('stanleygu.spinners.src', [])
         screenOpacity: '@',
         color: '@',
         loading: '@',
-        template: '@'
+        template: '@',
+        zIndex: '@'
       },
       // templateUrl: function($element, $attrs) {
       //   var base = '/templates/';
@@ -42,15 +43,15 @@ angular.module('stanleygu.spinners.src', [])
             .css('position', 'absolute')
             .css('top', '45%')
             .css('left', '50%')
-            .css('z-index', '100');
+            .css('z-index', attr.zIndex || '100');
 
           angular.element(element[0].querySelector('.spinner'))
             .css('position', 'relative')
             .css('top', '-50%')
             .css('left', '-50%')
             .css('margin', 'auto auto 0')
             .css('text-align', 'center')
-            .css('z-index', '101');
+            .css('z-index', attr.zIndex + 1 || '101');
 
           var t = element.attr('template');
           if (t === 'pulse' || t === 'rotatePlane') {
@@ -71,7 +72,7 @@ angular.module('stanleygu.spinners.src', [])
           .css('right', '0')
           .css('bottom', '0')
           .css('left', '0')
-          .css('z-index', '99');
+          .css('z-index', attr.zIndex - 1 || '99');
 
         scope.$watch('loading', function(newVal) {
           if (newVal === 'true' || newVal === true) {