Added non-svg loader as default

- Also fixed positioning
jfeigel · Sep 24, 2015 · d42fa68 · d42fa68
1 parent 8093cc7
commit d42fa68
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ Loading animation for AngularJS
 
 Used the SVG loading animations from <a href="http://codepen.io/aurer/pen/jEGbA">this Pen</a> by <a href="http://codepen.io/aurer/">Aurer</a>.
 
-This module can be used in any version of Angular (see the Plunk below). All major browsers, except IE, are <a href="http://caniuse.com/#feat=svg-smil">supported</a>.
+This module can be used in any version of Angular (see the Plunk below). All major browsers, except IE, are supported. Template 1, the default and now using CSS animations, is <a href="http://caniuse.com/#feat=css-animation">supported in IE10+</a> and the other templates are <a href="http://caniuse.com/#feat=svg-smil">not supported in IE</a>.
 
 
 ##### 1. Install the module via bower.
@@ -16,13 +16,17 @@ bower install ng-loaders
 angular.module('app',['ngLoader']);
 ```
 
+##### 3. Include the CSS file in your HTML file or import it in your CSS
+```CSS
+@import "bower_components/ngLoader/ngLoader.min.css";
+```
 
-##### 3. Include the file in your html file
+##### 4. Include the JS file in your HTML file
 ```HTML
 <script src="bower_components/ngLoader/ngLoader.min.js"></script>
 ```
 
-##### 4. Add the loader in your view and ensure the corresponding scope variable is defined
+##### 5. Add the loader in your view and ensure the corresponding scope variable is defined
 ```HTML
 <loader
 	working="scopeVariable"
@@ -59,7 +63,7 @@ Only the `working` attribute is required.
 | working            | _name of scope variable_ | Any valid scope variable |
 | disable-background | _false_                  | true or false            |
 | message            | _undefined_              | Any string               |
-| template           | _1_                      | Any number 1-8           |
+| template           | _9_                      | Any number 1-9           |
 
 ## Notes
 Styles of the loader can be updated / modified by targeting the `loader-content` class.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ng-loaders",
   "main": "ngLoader.js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://github.com/jfeigel/ngLoader",
   "authors": [
     "James Feigel <[email protected]>"

diff --git a/ngLoader.css b/ngLoader.css
@@ -0,0 +1,115 @@
+.loader-bars {
+    height: 25px;
+    width: 30px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.bar {
+  background-color: #ccc;
+  float: left;
+  height: 25px;
+  margin-left: 4px;
+  width: 5px;
+  opacity: 0.1;
+  -moz-animation-name: bounceG;
+  -moz-animation-duration: 1.5s;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-direction: linear;
+  -moz-transform: scale(0.7);
+  -webkit-animation-name: bounceG;
+  -webkit-animation-duration: 1.5s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: linear;
+  -webkit-transform: scale(0.7);
+  -ms-animation-name: bounceG;
+  -ms-animation-duration: 1.5s;
+  -ms-animation-iteration-count: infinite;
+  -ms-animation-direction: linear;
+  -ms-transform: scale(0.7);
+  -o-animation-name: bounceG;
+  -o-animation-duration: 1.5s;
+  -o-animation-iteration-count: infinite;
+  -o-animation-direction: linear;
+  -o-transform: scale(0.7);
+  animation-name: bounceG;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-direction: linear;
+  transform: scale(0.7);
+}
+
+.bar1 {
+  -moz-animation-delay: 0.45s;
+  -webkit-animation-delay: 0.45s;
+  -ms-animation-delay: 0.45s;
+  -o-animation-delay: 0.45s;
+  animation-delay: 0.45s;
+}
+
+.bar2 {
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+  -ms-animation-delay: 0.6s;
+  -o-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.bar3 {
+  -moz-animation-delay: 0.75s;
+  -webkit-animation-delay: 0.75s;
+  -ms-animation-delay: 0.75s;
+  -o-animation-delay: 0.75s;
+  animation-delay: 0.75s;
+}
+
+@-moz-keyframes bounceG {
+  0% {
+    -moz-transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    -moz-transform: scale(0.7);
+    opacity: 0.1;
+  }
+}
+@-webkit-keyframes bounceG {
+  0% {
+    -webkit-transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.7);
+    opacity: 0.1;
+  }
+}
+@-ms-keyframes bounceG {
+  0% {
+    -ms-transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    -ms-transform: scale(0.7);
+    opacity: 0.1;
+  }
+}
+@-o-keyframes bounceG {
+  0% {
+    -o-transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    -o-transform: scale(0.7);
+    opacity: 0.1;
+  }
+}
+@keyframes bounceG {
+  0% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.7);
+    opacity: 0.1;
+  }
+}
diff --git a/ngLoader.js b/ngLoader.js
@@ -1,9 +1,9 @@
 /**!
  * AngularJS Loader animation
  * @author  James Feigel <[email protected]>
- * @version 0.1.0
+ * @version 0.2.0
  */
-angular.module('ngLoaderTemplates', ['template/ngLoader/ngLoaderTemplate1.html', 'template/ngLoader/ngLoaderTemplate2.html', 'template/ngLoader/ngLoaderTemplate3.html', 'template/ngLoader/ngLoaderTemplate4.html', 'template/ngLoader/ngLoaderTemplate5.html', 'template/ngLoader/ngLoaderTemplate6.html', 'template/ngLoader/ngLoaderTemplate7.html', 'template/ngLoader/ngLoaderTemplate8.html']);
+angular.module('ngLoaderTemplates', ['template/ngLoader/ngLoaderTemplate1.html', 'template/ngLoader/ngLoaderTemplate2.html', 'template/ngLoader/ngLoaderTemplate3.html', 'template/ngLoader/ngLoaderTemplate4.html', 'template/ngLoader/ngLoaderTemplate5.html', 'template/ngLoader/ngLoaderTemplate6.html', 'template/ngLoader/ngLoaderTemplate7.html', 'template/ngLoader/ngLoaderTemplate8.html', 'template/ngLoader/ngLoaderTemplate9.html']);
 
 angular.module('template/ngLoader/ngLoaderTemplate1.html', []).run(['$templateCache',
   function($templateCache) {
@@ -227,6 +227,20 @@ angular.module('template/ngLoader/ngLoaderTemplate8.html', []).run(['$templateCa
       "  </div>\n" +
       "</div>");
 }]);
+angular.module('template/ngLoader/ngLoaderTemplate9.html', []).run(['$templateCache',
+  function($templateCache) {
+    $templateCache.put('template/ngLoader/ngLoaderTemplate9.html',
+      "<div class=\"loader\" data-ng-show=\"working\" style=\"position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;height: 100% !important;width: 100% !important;\">\n" +
+      "  <div class=\"loader-content\" style=\"position: absolute;top: 50%;left: 50%;line-height: 1;max-width: 50%;padding: 7px;-o-border-radius: 5px;border-radius: 5px;background-color: rgba(0, 0, 0, 0.5);color: #ffffff;text-transform: uppercase;text-align: center;word-break: break-word;z-index: 1;\">\n" +
+      "    <div class=\"loader-bars\">\n" +
+      "      <span class=\"bar1 bar\"></span>\n" +
+      "      <span class=\"bar2 bar\"></span>\n" +
+      "      <span class=\"bar3 bar\"></span>\n" +
+      "    </div>\n" +
+      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "  </div>\n" +
+      "</div>");
+}]);
 
 angular.module('ngLoader', ['ngLoaderTemplates'])
 .directive('loader', ['$timeout',
@@ -244,31 +258,37 @@ angular.module('ngLoader', ['ngLoaderTemplates'])
           if (isNaN(parseInt(tAttrs.template))) {
             console.error('Directive Error! Attribute \'template\' must be a number. Found \'' + tAttrs.template + '\'');
           }
-          else if (parseInt(tAttrs.template) < 1 || parseInt(tAttrs.template) > 8) {
-            console.error('Directive Error! Attribute \'template\' must be a number between 1 and 8. Found \'' + tAttrs.template + '\'');
+          else if (parseInt(tAttrs.template) < 1 || parseInt(tAttrs.template) > 9) {
+            console.error('Directive Error! Attribute \'template\' must be a number between 1 and 9. Found \'' + tAttrs.template + '\'');
           }
           else {
             return 'template/ngLoader/ngLoaderTemplate' + tAttrs.template + '.html';
           }
         }
-        return 'template/ngLoader/ngLoaderTemplate1.html';
+        return 'template/ngLoader/ngLoaderTemplate9.html';
       },
       link: function(scope, elem, attrs) {
-        if (attrs.disableBackground == 'true') {
+        scope.disableBackground = scope.$eval(scope.disableBackground);
+        if (scope.disableBackground === true) {
           elem.css({
-            'background': 'rgba(240,240,240,0.25)',
+            'background': 'rgba(0,0,0,0.225)',
             'z-index': '9999'
           });
         }
-        else if (attrs.disableBackground === undefined) {}
+        else if (scope.disableBackground === undefined) {}
         else {
-          console.error('Directive Error! Attribute \'disable-background\' must be \'true\' for \'false\'. Found \'' + attrs.disableBackground + '\'');
+          console.error('Directive Error! Attribute \'disable-background\' must be \'true\' for \'false\'. Found \'' + scope.disableBackground + '\'');
         }
         var content = elem.find('div')[0];
-        $timeout(function() {
-          content.style.marginTop = -(content.offsetHeight / 2)+'px';
-          content.style.marginLeft = -(content.offsetWidth / 2)+'px';
-        });
+        var positionWatch = scope.$watch('working', function(newValue, oldValue) {
+          if (newValue === true) {
+            $timeout(function() {
+              content.style.marginTop = -(content.offsetHeight / 2)+'px';
+              content.style.marginLeft = -(content.offsetWidth / 2)+'px';
+              positionWatch();
+            });
+          }
+        })
       }
     };
 }]);
diff --git a/ngLoader.min.css b/ngLoader.min.css