Release version 1.0.0

- Now always watch for changes in `working` and `message` in order to position the loader - `message` is now two-way bound so the message can be updated while the loader is still visible - Added `progressPercentage` so that the progress of the event can be displayed along with the loading animation
jfeigel · Mar 3, 2016 · a8053a0 · a8053a0
1 parent d7eff07
commit a8053a0
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 29 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 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>.
+This module can be used in any version of Angular (see the Plunk below). All major browsers, except IE, are supported. Template 9, 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.
@@ -35,10 +35,10 @@ OR
 ##### 5. Add the loader in your view and ensure the corresponding scope variable is defined
 ```HTML
 <loader
-	working="scopeVariable"
+	working="scopeWorkingVariable"
 	disable-background="true"
-	message="Loading..."
-	template="1">
+	message="scopeMessageVariable"
+	template="9">
 </loader>
 ```
 
@@ -49,6 +49,7 @@ Set your scope variable to true before the request and in the `finally` conditio
 Example plunk can be found <a href="http://plnkr.co/edit/IooEvgf5azTAzDULLLEJ?p=preview">here</a>.
 ```JavaScript
 $scope.working = true;
+$scope.message = 'Loading...'
 $http.get('<api endpoint>').then(
 	function(success) {
 		console.log('Success! ' + success);

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ng-loaders",
   "main": "ngLoader.js",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "homepage": "https://github.com/jfeigel/ngLoader",
   "authors": [
     "James Feigel <[email protected]>"

diff --git a/ngLoader.js b/ngLoader.js
@@ -1,7 +1,7 @@
 /**!
  * AngularJS Loader animation
  * @author  James Feigel <[email protected]>
- * @version 0.2.0
+ * @version 1.0.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', 'template/ngLoader/ngLoaderTemplate9.html']);
 
@@ -26,7 +26,8 @@ angular.module('template/ngLoader/ngLoaderTemplate1.html', []).run(['$templateCa
       "          repeatCount=\"indefinite\"/>\n" +
       "      </path>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -47,7 +48,8 @@ angular.module('template/ngLoader/ngLoaderTemplate2.html', []).run(['$templateCa
       "          repeatCount=\"indefinite\"/>\n" +
       "      </path>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -68,7 +70,8 @@ angular.module('template/ngLoader/ngLoaderTemplate3.html', []).run(['$templateCa
       "          repeatCount=\"indefinite\"/>\n" +
       "      </path>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -98,7 +101,8 @@ angular.module('template/ngLoader/ngLoaderTemplate4.html', []).run(['$templateCa
       "          begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" />       \n" +
       "      </rect>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -128,7 +132,8 @@ angular.module('template/ngLoader/ngLoaderTemplate5.html', []).run(['$templateCa
       "          begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" +
       "      </rect>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -164,7 +169,8 @@ angular.module('template/ngLoader/ngLoaderTemplate6.html', []).run(['$templateCa
       "          begin=\"0.3s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" +
       "      </rect>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -196,7 +202,8 @@ angular.module('template/ngLoader/ngLoaderTemplate7.html', []).run(['$templateCa
       "          begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" +
       "      </rect>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -223,7 +230,8 @@ angular.module('template/ngLoader/ngLoaderTemplate8.html', []).run(['$templateCa
       "        <animate attributeName=\"y\" attributeType=\"XML\" values=\"10; 5; 10\" begin=\"0.3s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" +
       "      </rect>\n" +
       "    </svg>\n" +
-      "    <p style=\"margin: 2px 0px;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -237,7 +245,8 @@ angular.module('template/ngLoader/ngLoaderTemplate9.html', []).run(['$templateCa
       "      <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" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"message\" data-ng-cloak data-ng-show=\"message\"></p>\n" +
+      "    <p style=\"margin: 5px 0 -5px;color: #ccc;\" data-ng-bind=\"progressPercentage + '%'\" data-ng-cloak data-ng-show=\"progressPercentage !== undefined && progressPercentage !== null\"></p>\n" +
       "  </div>\n" +
       "</div>");
 }]);
@@ -248,8 +257,9 @@ angular.module('ngLoader', ['ngLoaderTemplates'])
     return {
       scope: {
         working: '=',
-        message: '@',
-        disableBackground: '@'
+        progressPercentage: '=?',
+        message: '=?',
+        disableBackground: '@?'
       },
       restrict: 'AE',
       replace: true,
@@ -269,26 +279,38 @@ angular.module('ngLoader', ['ngLoaderTemplates'])
       },
       link: function(scope, elem, attrs) {
         scope.disableBackground = scope.$eval(scope.disableBackground);
+
         if (scope.disableBackground === true) {
           elem.css({
             'background': 'rgba(0,0,0,0.225)',
             'z-index': '9999'
           });
-        }
-        else if (scope.disableBackground === undefined) {}
-        else {
+        } else if (scope.disableBackground === undefined) {
+
+        } else {
           console.error('Directive Error! Attribute \'disable-background\' must be \'true\' for \'false\'. Found \'' + scope.disableBackground + '\'');
         }
+
         var content = elem.find('div')[0];
+
+        function positionLoader(watchFunction) {
+          $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();
-            });
+            positionLoader(positionWatch);
+          }
+        });
+
+        var messageWatch = scope.$watch('message', function(newValue, oldValue) {
+          if (newValue != oldValue) {
+            positionLoader(messageWatch);
           }
-        })
+        });
       }
     };
 }]);
diff --git a/ngLoader.min.css b/ngLoader.min.css