From a8053a0fdb3ad2527d7acd44428ed8a6e777e0ac Mon Sep 17 00:00:00 2001 From: James Feigel Date: Thu, 3 Mar 2016 06:19:47 -0600 Subject: [PATCH] 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 --- README.md | 9 ++++--- bower.json | 2 +- ngLoader.js | 64 ++++++++++++++++++++++++++++++++---------------- ngLoader.min.css | 2 +- ngLoader.min.js | 7 ++++-- 5 files changed, 55 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index e16e176..357ab9a 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Loading animation for AngularJS Used the SVG loading animations from this Pen by Aurer. -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 supported in IE10+ and the other templates are not supported in IE. +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 supported in IE10+ and the other templates are not supported in IE. ##### 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 + message="scopeMessageVariable" + template="9"> ``` @@ -49,6 +49,7 @@ Set your scope variable to true before the request and in the `finally` conditio Example plunk can be found here. ```JavaScript $scope.working = true; +$scope.message = 'Loading...' $http.get('').then( function(success) { console.log('Success! ' + success); diff --git a/bower.json b/bower.json index cbe213d..9fc5807 100644 --- 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 " diff --git a/ngLoader.js b/ngLoader.js index 6bd0670..8f5afcc 100644 --- a/ngLoader.js +++ b/ngLoader.js @@ -1,7 +1,7 @@ /**! * AngularJS Loader animation * @author James Feigel - * @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" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -47,7 +48,8 @@ angular.module('template/ngLoader/ngLoaderTemplate2.html', []).run(['$templateCa " repeatCount=\"indefinite\"/>\n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -68,7 +70,8 @@ angular.module('template/ngLoader/ngLoaderTemplate3.html', []).run(['$templateCa " repeatCount=\"indefinite\"/>\n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -98,7 +101,8 @@ angular.module('template/ngLoader/ngLoaderTemplate4.html', []).run(['$templateCa " begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" /> \n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -128,7 +132,8 @@ angular.module('template/ngLoader/ngLoaderTemplate5.html', []).run(['$templateCa " begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -164,7 +169,8 @@ angular.module('template/ngLoader/ngLoaderTemplate6.html', []).run(['$templateCa " begin=\"0.3s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -196,7 +202,8 @@ angular.module('template/ngLoader/ngLoaderTemplate7.html', []).run(['$templateCa " begin=\"0.4s\" dur=\"0.6s\" repeatCount=\"indefinite\" />\n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -223,7 +230,8 @@ angular.module('template/ngLoader/ngLoaderTemplate8.html', []).run(['$templateCa " \n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -237,7 +245,8 @@ angular.module('template/ngLoader/ngLoaderTemplate9.html', []).run(['$templateCa " \n" + " \n" + " \n" + - "

\n" + + "

\n" + + "

\n" + " \n" + ""); }]); @@ -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); } - }) + }); } }; }]); \ No newline at end of file diff --git a/ngLoader.min.css b/ngLoader.min.css index 53edf04..da31342 100644 --- a/ngLoader.min.css +++ b/ngLoader.min.css @@ -1 +1 @@ -.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:.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:.45s;-webkit-animation-delay:.45s;-ms-animation-delay:.45s;-o-animation-delay:.45s;animation-delay:.45s}.bar2{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;-ms-animation-delay:.6s;-o-animation-delay:.6s;animation-delay:.6s}.bar3{-moz-animation-delay:.75s;-webkit-animation-delay:.75s;-ms-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}@-moz-keyframes bounceG{0%{-moz-transform:scale(1.2);opacity:1}100%{-moz-transform:scale(0.7);opacity:.1}}@-webkit-keyframes bounceG{0%{-webkit-transform:scale(1.2);opacity:1}100%{-webkit-transform:scale(0.7);opacity:.1}}@-ms-keyframes bounceG{0%{-ms-transform:scale(1.2);opacity:1}100%{-ms-transform:scale(0.7);opacity:.1}}@-o-keyframes bounceG{0%{-o-transform:scale(1.2);opacity:1}100%{-o-transform:scale(0.7);opacity:.1}}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}100%{transform:scale(0.7);opacity:.1}} +.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}} \ No newline at end of file diff --git a/ngLoader.min.js b/ngLoader.min.js index 7037188..5db8dd7 100644 --- a/ngLoader.min.js +++ b/ngLoader.min.js @@ -1,6 +1,9 @@ /**! * AngularJS Loader animation * @author James Feigel - * @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"]),angular.module("template/ngLoader/ngLoaderTemplate1.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate1.html",'
\n
\n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate2.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate2.html",'
\n
\n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate3.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate3.html",'
\n
\n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate4.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate4.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate5.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate5.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate6.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate6.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate7.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate7.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate8.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate8.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate9.html",[]).run(["$templateCache",function($templateCache){$templateCache.put("template/ngLoader/ngLoaderTemplate9.html",'
\n
\n
\n \n \n \n
\n

\n
\n
')}]),angular.module("ngLoader",["ngLoaderTemplates"]).directive("loader",["$timeout",function($timeout){return{scope:{working:"=",message:"@",disableBackground:"@"},restrict:"AE",replace:!0,templateUrl:function(tElem,tAttrs){if(void 0!==tAttrs.template)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)>9))return"template/ngLoader/ngLoaderTemplate"+tAttrs.template+".html";console.error("Directive Error! Attribute 'template' must be a number between 1 and 9. Found '"+tAttrs.template+"'")}return"template/ngLoader/ngLoaderTemplate9.html"},link:function(scope,elem,attrs){scope.disableBackground=scope.$eval(scope.disableBackground),scope.disableBackground===!0?elem.css({background:"rgba(0,0,0,0.225)","z-index":"9999"}):void 0===scope.disableBackground||console.error("Directive Error! Attribute 'disable-background' must be 'true' for 'false'. Found '"+scope.disableBackground+"'");var content=elem.find("div")[0],positionWatch=scope.$watch("working",function(newValue,oldValue){newValue===!0&&$timeout(function(){content.style.marginTop=-(content.offsetHeight/2)+"px",content.style.marginLeft=-(content.offsetWidth/2)+"px",positionWatch()})})}}}]); \ No newline at end of file +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(e){e.put("template/ngLoader/ngLoaderTemplate1.html",'
\n
\n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate2.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate2.html",'
\n
\n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate3.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate3.html",'
\n
\n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate4.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate4.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate5.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate5.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate6.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate6.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate7.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate7.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate8.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate8.html",'
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
')}]),angular.module("template/ngLoader/ngLoaderTemplate9.html",[]).run(["$templateCache",function(e){e.put("template/ngLoader/ngLoaderTemplate9.html",'
\n
\n
\n \n \n \n
\n

\n

\n
\n
')}]),angular.module("ngLoader",["ngLoaderTemplates"]).directive("loader",["$timeout",function(e){return{scope:{working:"=",progressPercentage:"=?",message:"=?",disableBackground:"@?"},restrict:"AE",replace:!0,templateUrl:function(e,t){if(void 0!==t.template)if(isNaN(parseInt(t.template)))console.error("Directive Error! Attribute 'template' must be a number. Found '"+t.template+"'") +else{if(!(parseInt(t.template)<1||parseInt(t.template)>9))return"template/ngLoader/ngLoaderTemplate"+t.template+".html" +console.error("Directive Error! Attribute 'template' must be a number between 1 and 9. Found '"+t.template+"'")}return"template/ngLoader/ngLoaderTemplate9.html"},link:function(t,a,n){function r(t){e(function(){i.style.marginTop=-(i.offsetHeight/2)+"px",i.style.marginLeft=-(i.offsetWidth/2)+"px"})}t.disableBackground=t.$eval(t.disableBackground),t.disableBackground===!0?a.css({background:"rgba(0,0,0,0.225)","z-index":"9999"}):void 0===t.disableBackground||console.error("Directive Error! Attribute 'disable-background' must be 'true' for 'false'. Found '"+t.disableBackground+"'") +var i=a.find("div")[0],o=t.$watch("working",function(e,t){e===!0&&r(o)}),l=t.$watch("message",function(e,t){e!=t&&r(l)})}}}])