From 57de4f32a2cc1a6ad955ae8436073a1dc4fe0c4b Mon Sep 17 00:00:00 2001 From: dober Date: Mon, 13 Oct 2014 15:53:22 +0300 Subject: [PATCH 01/10] Added image preloader directive --- build/angular-spinkit.js | 53 ++++++++++++++++++++++++++++++++++-- build/angular-spinkit.min.js | 4 +-- src/angular-spinkit.js | 50 +++++++++++++++++++++++++++++++++- 3 files changed, 101 insertions(+), 6 deletions(-) diff --git a/build/angular-spinkit.js b/build/angular-spinkit.js index 0c05ab5..0a5b714 100644 --- a/build/angular-spinkit.js +++ b/build/angular-spinkit.js @@ -18,7 +18,8 @@ angular.module('angular-spinkit', 'ngThreeBounceSpinner', 'ngCubeGridSpinner', 'ngWordPressSpinner', - 'ngFadingCircleSpinner' + 'ngFadingCircleSpinner', + 'ngSpinkitImagePreloader' ]); angular.module('ngRotatingPlaneSpinner', []).directive('rotatingPlaneSpinner', function () { @@ -98,8 +99,54 @@ angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', fun }; }); - - +angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', function ($compile, $injector) { + return { + restrict: 'A', + scope: { + ngSrc: '@', + spinkitImagePreloader: '@' + }, + link: function(scope, element, attrs) { + var spinnerWrapper, + spinner; + + // Check for the existence of the spinkit-directive + if(!$injector.has(attrs.$normalize(scope.spinkitImagePreloader) + 'Directive')) + return; + + // Create and configure DOM-spinner-elements + spinnerWrapper = angular.element('
').addClass('spinner-wrapper'), + spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope); + spinnerWrapper.append(spinner); + spinnerWrapper.css('overflow', 'hidden'); + + element.after(spinnerWrapper); + + // Copy dimensions (inline and attributes) from the image to the spinner wrapper + if(element.css('width')) + spinnerWrapper.css('width', element.css('width')); + + if(attrs.width) + spinnerWrapper.css('width', attrs.width + 'px'); + + if(element.css('height')) + spinnerWrapper.css('height', element.css('height')); + + if(attrs.height) + spinnerWrapper.css('height', attrs.height + 'px'); + + element.on('load', function () { + spinnerWrapper.css('display', 'none'); + element.css('display', 'block'); + }); + + scope.$watch('ngSrc', function () { + spinnerWrapper.css('display', 'block'); + element.css('display', 'none'); + }); + } + }; +}]); angular.module('angular-spinkit').run(['$templateCache', function($templateCache) { 'use strict'; diff --git a/build/angular-spinkit.min.js b/build/angular-spinkit.min.js index 05966ef..60de1a2 100644 --- a/build/angular-spinkit.min.js +++ b/build/angular-spinkit.min.js @@ -1,2 +1,2 @@ -/*! angular-spinkit 2014-10-10 */ -"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file +/*! angular-spinkit 2014-10-13 */ +"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector",function(a,b){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@"},link:function(c,d,e){var f,g;b.has(e.$normalize(c.spinkitImagePreloader)+"Directive")&&(f=angular.element("
").addClass("spinner-wrapper"),g=a("<"+c.spinkitImagePreloader+"/>")(c),f.append(g),f.css("overflow","hidden"),d.after(f),d.css("width")&&f.css("width",d.css("width")),e.width&&f.css("width",e.width+"px"),d.css("height")&&f.css("height",d.css("height")),e.height&&f.css("height",e.height+"px"),d.on("load",function(){f.css("display","none"),d.css("display","block")}),c.$watch("ngSrc",function(){f.css("display","block"),d.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file diff --git a/src/angular-spinkit.js b/src/angular-spinkit.js index 415a74e..26e022b 100644 --- a/src/angular-spinkit.js +++ b/src/angular-spinkit.js @@ -18,7 +18,8 @@ angular.module('angular-spinkit', 'ngThreeBounceSpinner', 'ngCubeGridSpinner', 'ngWordPressSpinner', - 'ngFadingCircleSpinner' + 'ngFadingCircleSpinner', + 'ngSpinkitImagePreloader' ]); angular.module('ngRotatingPlaneSpinner', []).directive('rotatingPlaneSpinner', function () { @@ -98,4 +99,51 @@ angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', fun }; }); +angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', function ($compile, $injector) { + return { + restrict: 'A', + scope: { + ngSrc: '@', + spinkitImagePreloader: '@' + }, + link: function(scope, element, attrs) { + var spinnerWrapper, + spinner; + + // Check for the existence of the spinkit-directive + if(!$injector.has(attrs.$normalize(scope.spinkitImagePreloader) + 'Directive')) + return; + + // Create and configure DOM-spinner-elements + spinnerWrapper = angular.element('
').addClass('spinner-wrapper'), + spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope); + spinnerWrapper.append(spinner); + spinnerWrapper.css('overflow', 'hidden'); + + element.after(spinnerWrapper); + + // Copy dimensions (inline and attributes) from the image to the spinner wrapper + if(element.css('width')) + spinnerWrapper.css('width', element.css('width')); + if(attrs.width) + spinnerWrapper.css('width', attrs.width + 'px'); + + if(element.css('height')) + spinnerWrapper.css('height', element.css('height')); + + if(attrs.height) + spinnerWrapper.css('height', attrs.height + 'px'); + + element.on('load', function () { + spinnerWrapper.css('display', 'none'); + element.css('display', 'block'); + }); + + scope.$watch('ngSrc', function () { + spinnerWrapper.css('display', 'block'); + element.css('display', 'none'); + }); + } + }; +}]); \ No newline at end of file From 432d8886b255f3f629b34ea1e6e754b96384ab4d Mon Sep 17 00:00:00 2001 From: Gutsulyak Dmitry Date: Tue, 14 Oct 2014 12:09:58 +0300 Subject: [PATCH 02/10] Update the README.md and the ngSpinkitImagePreloader module --- README.md | 17 ++++++++++++++--- build/angular-spinkit.js | 6 ++++-- build/angular-spinkit.min.js | 4 ++-- src/angular-spinkit.js | 6 ++++-- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d37580b..2d0c781 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,9 @@ SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS ## Usage -1. Add angular-spinkit to your bower.json file +1. Install with bower: ```javascript - "angular-spinkit": "0.3.2" + bower install angular-spinkit --save ``` 2. Add angular-spinkit.min.js and angular-spinkit.min.css to your main file (index.html) @@ -35,7 +35,18 @@ SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS ``` -5. Add all your requests and ideas in the issues area or send us a pull request! + +5. If you want to show the spinner while an image is loading just use the 'spinkit-image-preloader' directive: + ```html + + Your description + Your escription + + + Your description + ``` + +6. Add all your requests and ideas in the issues area or send us a pull request! ## Example You can check out this live example here: http://jsfiddle.net/Urigo/638AA/18/ diff --git a/build/angular-spinkit.js b/build/angular-spinkit.js index 0a5b714..69c085a 100644 --- a/build/angular-spinkit.js +++ b/build/angular-spinkit.js @@ -104,10 +104,12 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', restrict: 'A', scope: { ngSrc: '@', - spinkitImagePreloader: '@' + spinkitImagePreloader: '@', + spinkitImagePreloaderClass: '@' }, link: function(scope, element, attrs) { var spinnerWrapper, + spinnerWrapperClass = scope.spinkitImagePreloaderClass || 'spinner-wrapper', spinner; // Check for the existence of the spinkit-directive @@ -115,7 +117,7 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', return; // Create and configure DOM-spinner-elements - spinnerWrapper = angular.element('
').addClass('spinner-wrapper'), + spinnerWrapper = angular.element('
').addClass(spinnerWrapperClass), spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope); spinnerWrapper.append(spinner); spinnerWrapper.css('overflow', 'hidden'); diff --git a/build/angular-spinkit.min.js b/build/angular-spinkit.min.js index 60de1a2..11c3ea1 100644 --- a/build/angular-spinkit.min.js +++ b/build/angular-spinkit.min.js @@ -1,2 +1,2 @@ -/*! angular-spinkit 2014-10-13 */ -"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector",function(a,b){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@"},link:function(c,d,e){var f,g;b.has(e.$normalize(c.spinkitImagePreloader)+"Directive")&&(f=angular.element("
").addClass("spinner-wrapper"),g=a("<"+c.spinkitImagePreloader+"/>")(c),f.append(g),f.css("overflow","hidden"),d.after(f),d.css("width")&&f.css("width",d.css("width")),e.width&&f.css("width",e.width+"px"),d.css("height")&&f.css("height",d.css("height")),e.height&&f.css("height",e.height+"px"),d.on("load",function(){f.css("display","none"),d.css("display","block")}),c.$watch("ngSrc",function(){f.css("display","block"),d.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file +/*! angular-spinkit 2014-10-14 */ +"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector",function(a,b){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(c,d,e){var f,g,h=c.spinkitImagePreloaderClass||"spinner-wrapper";b.has(e.$normalize(c.spinkitImagePreloader)+"Directive")&&(f=angular.element("
").addClass(h),g=a("<"+c.spinkitImagePreloader+"/>")(c),f.append(g),f.css("overflow","hidden"),d.after(f),d.css("width")&&f.css("width",d.css("width")),e.width&&f.css("width",e.width+"px"),d.css("height")&&f.css("height",d.css("height")),e.height&&f.css("height",e.height+"px"),d.on("load",function(){f.css("display","none"),d.css("display","block")}),c.$watch("ngSrc",function(){f.css("display","block"),d.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file diff --git a/src/angular-spinkit.js b/src/angular-spinkit.js index 26e022b..b8d229f 100644 --- a/src/angular-spinkit.js +++ b/src/angular-spinkit.js @@ -104,10 +104,12 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', restrict: 'A', scope: { ngSrc: '@', - spinkitImagePreloader: '@' + spinkitImagePreloader: '@', + spinkitImagePreloaderClass: '@' }, link: function(scope, element, attrs) { var spinnerWrapper, + spinnerWrapperClass = scope.spinkitImagePreloaderClass || 'spinner-wrapper', spinner; // Check for the existence of the spinkit-directive @@ -115,7 +117,7 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', return; // Create and configure DOM-spinner-elements - spinnerWrapper = angular.element('
').addClass('spinner-wrapper'), + spinnerWrapper = angular.element('
').addClass(spinnerWrapperClass), spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope); spinnerWrapper.append(spinner); spinnerWrapper.css('overflow', 'hidden'); From 802c303888c2ae8a0b3d3f5833e7ad425b1df758 Mon Sep 17 00:00:00 2001 From: Gutsulyak Dmitry Date: Tue, 14 Oct 2014 14:27:36 +0300 Subject: [PATCH 03/10] Update bower.json --- bower.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 8c05d6d..b94d9fa 100644 --- a/bower.json +++ b/bower.json @@ -11,7 +11,11 @@ "SpinKit", "spinners", "AngularJS", - "ngSpinKit" + "ngSpinKit", + "preloader", + "image spinner", + "image preloader", + "loading indicator" ], "license": "MIT", "homepage": "https://github.com/Urigo", @@ -24,5 +28,6 @@ "tests" ], "dependencies": { + "angular": "*" } } From c1dd65e0be91a0875bd09fb913ae5637ef6ced10 Mon Sep 17 00:00:00 2001 From: Uri Goldshtein Date: Tue, 14 Oct 2014 19:40:08 +0300 Subject: [PATCH 04/10] Bump version --- bower.json | 2 +- build/angular-spinkit.min.css | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index b94d9fa..deaba12 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-spinkit", - "version": "0.3.2", + "version": "0.3.3", "authors": [ "Urigo " ], diff --git a/build/angular-spinkit.min.css b/build/angular-spinkit.min.css index f15d558..84be532 100644 --- a/build/angular-spinkit.min.css +++ b/build/angular-spinkit.min.css @@ -1,2 +1,2 @@ -/*! angular-spinkit 2014-10-10 */ +/*! angular-spinkit 2014-10-14 */ .chasing-dots-spinner{margin:100px auto;width:40px;height:40px;position:relative;text-align:center;-webkit-animation:rotate 2s infinite linear;animation:rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.spinning-dots-spinner{margin:100px auto;width:20px;height:20px;position:relative}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#333;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinning-dots-spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.double-bounce-spinner{width:40px;height:40px;position:relative;margin:100px auto}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.pulse-spinner{width:40px;height:40px;margin:100px auto;background-color:#333;border-radius:100%;-webkit-animation:scaleout 1s infinite ease-in-out;animation:scaleout 1s infinite ease-in-out}@-webkit-keyframes scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes scaleout{0%{transform:scale(0);-webkit-transform:scale(0)}100%{transform:scale(1);-webkit-transform:scale(1);opacity:0}}.three-dots-row-spinner{width:30px;height:30px;background-color:#333;margin:100px auto;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.wandering-cubes-spinner{margin:100px auto;width:32px;height:32px;position:relative}.wandering-cubes-spinner:after,.wandering-cubes-spinner:before{content:'';background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out}.wandering-cubes-spinner:after{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(22px) rotate(-90deg) scale(0.5)}50%{-webkit-transform:translateX(22px) translateY(22px) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(22px) rotate(-270deg) scale(0.5)}100%{-webkit-transform:rotate(-360deg)}}@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.wave-spinner{margin:100px auto;width:50px;height:30px;text-align:center;font-size:10px}.wave-spinner>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.wave-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.wave-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.wave-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.wave-spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,100%,40%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.three-bounce-spinner{margin:100px auto 0;width:70px;text-align:center}.three-bounce-spinner>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.three-bounce-spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.three-bounce-spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.cube-grid-spinner{width:30px;height:30px;margin:100px auto}.cube{width:33%;height:33%;background:#333;float:left;-webkit-animation:scaleDelay 1.3s infinite ease-in-out;animation:scaleDelay 1.3s infinite ease-in-out}.cube-grid-spinner .cube:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.cube-grid-spinner .cube:nth-child(4){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(5){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(6){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(7){-webkit-animation-delay:0s;animation-delay:0s}.cube-grid-spinner .cube:nth-child(8){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(9){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1)}}@keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(1,1,1);transform:scale3D(0,0,1)}}.word-press-spinner{background:#333;width:30px;height:30px;display:inline-block;border-radius:30px;position:relative;-webkit-animation:inner-circle 1s linear infinite;animation:inner-circle 1s linear infinite}.inner-circle{display:block;background:#fff;width:8px;height:8px;position:absolute;border-radius:8px;top:5px;left:5px}@-webkit-keyframes inner-circle{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes inner-circle{0%{transform:rotate(0);-webkit-transform:rotate(0)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}.fading-circle-spinner{margin:100px auto;width:22px;height:22px;position:relative}.fading-circle{width:100%;height:100%;position:absolute;left:0;top:0}.fading-circle:before{content:'';display:block;margin:0 auto;width:18%;height:18%;background-color:#333;border-radius:100%;-webkit-animation:fadedelay 1.2s infinite ease-in-out both;animation:fadedelay 1.2s infinite ease-in-out both}.fading-circle2{transform:rotate(30deg);-webkit-transform:rotate(30deg)}.fading-circle3{transform:rotate(60deg);-webkit-transform:rotate(60deg)}.fading-circle4{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.fading-circle5{transform:rotate(120deg);-webkit-transform:rotate(120deg)}.fading-circle6{transform:rotate(150deg);-webkit-transform:rotate(150deg)}.fading-circle7{transform:rotate(180deg);-webkit-transform:rotate(180deg)}.fading-circle8{transform:rotate(210deg);-webkit-transform:rotate(210deg)}.fading-circle9{transform:rotate(240deg);-webkit-transform:rotate(240deg)}.fading-circle10{transform:rotate(270deg);-webkit-transform:rotate(270deg)}.fading-circle11{transform:rotate(300deg);-webkit-transform:rotate(300deg)}.fading-circle12{transform:rotate(330deg);-webkit-transform:rotate(330deg)}.fading-circle2:before{animation-delay:-1.1s;-webkit-animation-delay:-1.1s}.fading-circle3:before{animation-delay:-1s;-webkit-animation-delay:-1s}.fading-circle4:before{animation-delay:-.9s;-webkit-animation-delay:-.9s}.fading-circle5:before{animation-delay:-.8s;-webkit-animation-delay:-.8s}.fading-circle6:before{animation-delay:-.7s;-webkit-animation-delay:-.7s}.fading-circle7:before{animation-delay:-.6s;-webkit-animation-delay:-.6s}.fading-circle8:before{animation-delay:-.5s;-webkit-animation-delay:-.5s}.fading-circle9:before{animation-delay:-.4s;-webkit-animation-delay:-.4s}.fading-circle10:before{animation-delay:-.3s;-webkit-animation-delay:-.3s}.fading-circle11:before{animation-delay:-.2s;-webkit-animation-delay:-.2s}.fading-circle12:before{animation-delay:-.1s;-webkit-animation-delay:-.1s}@-webkit-keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}} \ No newline at end of file diff --git a/package.json b/package.json index 17fc658..578086c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-spinkit", - "version": "0.3.2", + "version": "0.3.3", "devDependencies": { "grunt": "~0.4.2", "grunt-angular-templates": "~0.5.1", From 4a9b283f9de4fb6f31031f76d61b939f44fcdc51 Mon Sep 17 00:00:00 2001 From: vinesh Date: Mon, 2 Mar 2015 11:57:35 +0530 Subject: [PATCH 05/10] broadcating the image loaded event --- build/angular-spinkit.js | 204 +++++++++++++++++++++++------------ build/angular-spinkit.min.js | 4 +- src/angular-spinkit.js | 3 +- 3 files changed, 140 insertions(+), 71 deletions(-) diff --git a/build/angular-spinkit.js b/build/angular-spinkit.js index 69c085a..4754cf6 100644 --- a/build/angular-spinkit.js +++ b/build/angular-spinkit.js @@ -99,7 +99,7 @@ angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', fun }; }); -angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', function ($compile, $injector) { +angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', '$rootScope', function ($compile, $injector, $rootScope) { return { restrict: 'A', scope: { @@ -140,6 +140,7 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', element.on('load', function () { spinnerWrapper.css('display', 'none'); element.css('display', 'block'); + $rootScope.$broadcast('angular-spinkit:imageLoaded'); }); scope.$watch('ngSrc', function () { @@ -153,116 +154,183 @@ angular.module('angular-spinkit').run(['$templateCache', function($templateCache 'use strict'; $templateCache.put('src/templates/chasingDotsSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" ); $templateCache.put('src/templates/circleSpinner.html', - "
\n" + - " \n" + - " \n" + - " \n" + - "
\n" + "
\r" + + "\n" + + " \r" + + "\n" + + " \r" + + "\n" + + " \r" + + "\n" + + "
\r" + + "\n" ); $templateCache.put('src/templates/cubeGridSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + "
" ); $templateCache.put('src/templates/doubleBounceSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" ); $templateCache.put('src/templates/fadingCircleSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + "
" ); $templateCache.put('src/templates/pulseSpinner.html', - "
\n" + "
\r" + + "\n" ); $templateCache.put('src/templates/rotatingPlaneSpinner.html', - "
\n" + "
\r" + + "\n" ); $templateCache.put('src/templates/threeBounceSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + "
" ); $templateCache.put('src/templates/wanderingCubesSpinner.html', - "
\n" + "
\r" + + "\n" ); $templateCache.put('src/templates/waveSpinner.html', - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + - "
\n" + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" + + "
\r" + + "\n" ); $templateCache.put('src/templates/wordPressSpinner.html', - "
\n" + - " \n" + + "
\r" + + "\n" + + " \r" + + "\n" + "
" ); diff --git a/build/angular-spinkit.min.js b/build/angular-spinkit.min.js index 11c3ea1..9467e1a 100644 --- a/build/angular-spinkit.min.js +++ b/build/angular-spinkit.min.js @@ -1,2 +1,2 @@ -/*! angular-spinkit 2014-10-14 */ -"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector",function(a,b){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(c,d,e){var f,g,h=c.spinkitImagePreloaderClass||"spinner-wrapper";b.has(e.$normalize(c.spinkitImagePreloader)+"Directive")&&(f=angular.element("
").addClass(h),g=a("<"+c.spinkitImagePreloader+"/>")(c),f.append(g),f.css("overflow","hidden"),d.after(f),d.css("width")&&f.css("width",d.css("width")),e.width&&f.css("width",e.width+"px"),d.css("height")&&f.css("height",d.css("height")),e.height&&f.css("height",e.height+"px"),d.on("load",function(){f.css("display","none"),d.css("display","block")}),c.$watch("ngSrc",function(){f.css("display","block"),d.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file +/*! angular-spinkit 2015-03-02 */ +"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector","$rootScope",function(a,b,c){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(d,e,f){var g,h,i=d.spinkitImagePreloaderClass||"spinner-wrapper";b.has(f.$normalize(d.spinkitImagePreloader)+"Directive")&&(g=angular.element("
").addClass(i),h=a("<"+d.spinkitImagePreloader+"/>")(d),g.append(h),g.css("overflow","hidden"),e.after(g),e.css("width")&&g.css("width",e.css("width")),f.width&&g.css("width",f.width+"px"),e.css("height")&&g.css("height",e.css("height")),f.height&&g.css("height",f.height+"px"),e.on("load",function(){g.css("display","none"),e.css("display","block"),c.$broadcast("angular-spinkit:imageLoaded")}),d.$watch("ngSrc",function(){g.css("display","block"),e.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\r\n'),a.put("src/templates/circleSpinner.html",'\r\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\r\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\r\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\r\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\r\n'),a.put("src/templates/waveSpinner.html",'\r\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file diff --git a/src/angular-spinkit.js b/src/angular-spinkit.js index b8d229f..9e41775 100644 --- a/src/angular-spinkit.js +++ b/src/angular-spinkit.js @@ -99,7 +99,7 @@ angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', fun }; }); -angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', function ($compile, $injector) { +angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', '$rootScope', function ($compile, $injector, $rootScope) { return { restrict: 'A', scope: { @@ -140,6 +140,7 @@ angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', element.on('load', function () { spinnerWrapper.css('display', 'none'); element.css('display', 'block'); + $rootScope.$broadcast('angular-spinkit:imageLoaded'); }); scope.$watch('ngSrc', function () { From 82bc3007d3e4636a94b80bcd78c33c86287a611a Mon Sep 17 00:00:00 2001 From: vinesh Date: Mon, 2 Mar 2015 12:07:04 +0530 Subject: [PATCH 06/10] changed README to include image loaded event --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 2d0c781..57b105b 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,11 @@ SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS Your description ``` + You can listen to the image loaded event. + ```javascript + // in controller + $scope.$on('angular-spinkit:imageLoaded'); + ``` 6. Add all your requests and ideas in the issues area or send us a pull request! From fde25e969434b3b39a2edd474b23856ca1fdd934 Mon Sep 17 00:00:00 2001 From: Steve Ricciardelli Date: Wed, 10 Jun 2015 13:58:35 -0400 Subject: [PATCH 07/10] add main to package.json for people using npm type installs --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 578086c..0ead67d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "angular-spinkit", + "main": "build/angular-spinkit.js", "version": "0.3.3", "devDependencies": { "grunt": "~0.4.2", From 70a725fc4aef0e1c61f0335a50f7724b0bc45c93 Mon Sep 17 00:00:00 2001 From: Adam Gordon Date: Wed, 2 Dec 2015 14:45:07 -0700 Subject: [PATCH 08/10] chore(build): add support for es6 module syntax * add new index.js file for supporting es6 module import format. --- build/index.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 build/index.js diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..bd0f8d9 --- /dev/null +++ b/build/index.js @@ -0,0 +1,2 @@ +require('./angular-spinkit'); +module.exports = 'angularSpinkit'; From 71d6197e681f86970ff4917ab593159090cd47c3 Mon Sep 17 00:00:00 2001 From: Uri Goldshtein Date: Mon, 22 Feb 2016 15:26:32 +0200 Subject: [PATCH 09/10] chore(release): Release 0.3.4 to Npm and Bower --- bower.json | 2 +- build/angular-spinkit.js | 201 ++++++++++++---------------------- build/angular-spinkit.min.css | 2 +- build/angular-spinkit.min.js | 4 +- package.json | 2 +- 5 files changed, 72 insertions(+), 139 deletions(-) diff --git a/bower.json b/bower.json index deaba12..5de1315 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-spinkit", - "version": "0.3.3", + "version": "0.3.4", "authors": [ "Urigo " ], diff --git a/build/angular-spinkit.js b/build/angular-spinkit.js index 4754cf6..23281e8 100644 --- a/build/angular-spinkit.js +++ b/build/angular-spinkit.js @@ -154,183 +154,116 @@ angular.module('angular-spinkit').run(['$templateCache', function($templateCache 'use strict'; $templateCache.put('src/templates/chasingDotsSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + "
\n" + + "
\n" + + "
\n" + + "
\n" ); $templateCache.put('src/templates/circleSpinner.html', - "
\r" + - "\n" + - " \r" + - "\n" + - " \r" + - "\n" + - " \r" + - "\n" + - "
\r" + - "\n" + "
\n" + + " \n" + + " \n" + + " \n" + + "
\n" ); $templateCache.put('src/templates/cubeGridSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + "
" ); $templateCache.put('src/templates/doubleBounceSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + "
\n" + + "
\n" + + "
\n" + + "
\n" ); $templateCache.put('src/templates/fadingCircleSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + "
" ); $templateCache.put('src/templates/pulseSpinner.html', - "
\r" + - "\n" + "
\n" ); $templateCache.put('src/templates/rotatingPlaneSpinner.html', - "
\r" + - "\n" + "
\n" ); $templateCache.put('src/templates/threeBounceSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + "
" ); $templateCache.put('src/templates/wanderingCubesSpinner.html', - "
\r" + - "\n" + "
\n" ); $templateCache.put('src/templates/waveSpinner.html', - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + - "
\r" + - "\n" + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" + + "
\n" ); $templateCache.put('src/templates/wordPressSpinner.html', - "
\r" + - "\n" + - " \r" + - "\n" + + "
\n" + + " \n" + "
" ); diff --git a/build/angular-spinkit.min.css b/build/angular-spinkit.min.css index 84be532..6cffbbe 100644 --- a/build/angular-spinkit.min.css +++ b/build/angular-spinkit.min.css @@ -1,2 +1,2 @@ -/*! angular-spinkit 2014-10-14 */ +/*! angular-spinkit 2016-02-22 */ .chasing-dots-spinner{margin:100px auto;width:40px;height:40px;position:relative;text-align:center;-webkit-animation:rotate 2s infinite linear;animation:rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.spinning-dots-spinner{margin:100px auto;width:20px;height:20px;position:relative}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#333;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinning-dots-spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.double-bounce-spinner{width:40px;height:40px;position:relative;margin:100px auto}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.pulse-spinner{width:40px;height:40px;margin:100px auto;background-color:#333;border-radius:100%;-webkit-animation:scaleout 1s infinite ease-in-out;animation:scaleout 1s infinite ease-in-out}@-webkit-keyframes scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes scaleout{0%{transform:scale(0);-webkit-transform:scale(0)}100%{transform:scale(1);-webkit-transform:scale(1);opacity:0}}.three-dots-row-spinner{width:30px;height:30px;background-color:#333;margin:100px auto;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.wandering-cubes-spinner{margin:100px auto;width:32px;height:32px;position:relative}.wandering-cubes-spinner:after,.wandering-cubes-spinner:before{content:'';background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out}.wandering-cubes-spinner:after{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(22px) rotate(-90deg) scale(0.5)}50%{-webkit-transform:translateX(22px) translateY(22px) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(22px) rotate(-270deg) scale(0.5)}100%{-webkit-transform:rotate(-360deg)}}@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.wave-spinner{margin:100px auto;width:50px;height:30px;text-align:center;font-size:10px}.wave-spinner>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.wave-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.wave-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.wave-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.wave-spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,100%,40%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.three-bounce-spinner{margin:100px auto 0;width:70px;text-align:center}.three-bounce-spinner>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.three-bounce-spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.three-bounce-spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.cube-grid-spinner{width:30px;height:30px;margin:100px auto}.cube{width:33%;height:33%;background:#333;float:left;-webkit-animation:scaleDelay 1.3s infinite ease-in-out;animation:scaleDelay 1.3s infinite ease-in-out}.cube-grid-spinner .cube:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.cube-grid-spinner .cube:nth-child(4){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(5){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(6){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(7){-webkit-animation-delay:0s;animation-delay:0s}.cube-grid-spinner .cube:nth-child(8){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(9){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1)}}@keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(1,1,1);transform:scale3D(0,0,1)}}.word-press-spinner{background:#333;width:30px;height:30px;display:inline-block;border-radius:30px;position:relative;-webkit-animation:inner-circle 1s linear infinite;animation:inner-circle 1s linear infinite}.inner-circle{display:block;background:#fff;width:8px;height:8px;position:absolute;border-radius:8px;top:5px;left:5px}@-webkit-keyframes inner-circle{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes inner-circle{0%{transform:rotate(0);-webkit-transform:rotate(0)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}.fading-circle-spinner{margin:100px auto;width:22px;height:22px;position:relative}.fading-circle{width:100%;height:100%;position:absolute;left:0;top:0}.fading-circle:before{content:'';display:block;margin:0 auto;width:18%;height:18%;background-color:#333;border-radius:100%;-webkit-animation:fadedelay 1.2s infinite ease-in-out both;animation:fadedelay 1.2s infinite ease-in-out both}.fading-circle2{transform:rotate(30deg);-webkit-transform:rotate(30deg)}.fading-circle3{transform:rotate(60deg);-webkit-transform:rotate(60deg)}.fading-circle4{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.fading-circle5{transform:rotate(120deg);-webkit-transform:rotate(120deg)}.fading-circle6{transform:rotate(150deg);-webkit-transform:rotate(150deg)}.fading-circle7{transform:rotate(180deg);-webkit-transform:rotate(180deg)}.fading-circle8{transform:rotate(210deg);-webkit-transform:rotate(210deg)}.fading-circle9{transform:rotate(240deg);-webkit-transform:rotate(240deg)}.fading-circle10{transform:rotate(270deg);-webkit-transform:rotate(270deg)}.fading-circle11{transform:rotate(300deg);-webkit-transform:rotate(300deg)}.fading-circle12{transform:rotate(330deg);-webkit-transform:rotate(330deg)}.fading-circle2:before{animation-delay:-1.1s;-webkit-animation-delay:-1.1s}.fading-circle3:before{animation-delay:-1s;-webkit-animation-delay:-1s}.fading-circle4:before{animation-delay:-.9s;-webkit-animation-delay:-.9s}.fading-circle5:before{animation-delay:-.8s;-webkit-animation-delay:-.8s}.fading-circle6:before{animation-delay:-.7s;-webkit-animation-delay:-.7s}.fading-circle7:before{animation-delay:-.6s;-webkit-animation-delay:-.6s}.fading-circle8:before{animation-delay:-.5s;-webkit-animation-delay:-.5s}.fading-circle9:before{animation-delay:-.4s;-webkit-animation-delay:-.4s}.fading-circle10:before{animation-delay:-.3s;-webkit-animation-delay:-.3s}.fading-circle11:before{animation-delay:-.2s;-webkit-animation-delay:-.2s}.fading-circle12:before{animation-delay:-.1s;-webkit-animation-delay:-.1s}@-webkit-keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}} \ No newline at end of file diff --git a/build/angular-spinkit.min.js b/build/angular-spinkit.min.js index 9467e1a..458345d 100644 --- a/build/angular-spinkit.min.js +++ b/build/angular-spinkit.min.js @@ -1,2 +1,2 @@ -/*! angular-spinkit 2015-03-02 */ -"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector","$rootScope",function(a,b,c){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(d,e,f){var g,h,i=d.spinkitImagePreloaderClass||"spinner-wrapper";b.has(f.$normalize(d.spinkitImagePreloader)+"Directive")&&(g=angular.element("
").addClass(i),h=a("<"+d.spinkitImagePreloader+"/>")(d),g.append(h),g.css("overflow","hidden"),e.after(g),e.css("width")&&g.css("width",e.css("width")),f.width&&g.css("width",f.width+"px"),e.css("height")&&g.css("height",e.css("height")),f.height&&g.css("height",f.height+"px"),e.on("load",function(){g.css("display","none"),e.css("display","block"),c.$broadcast("angular-spinkit:imageLoaded")}),d.$watch("ngSrc",function(){g.css("display","block"),e.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\r\n'),a.put("src/templates/circleSpinner.html",'\r\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\r\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\r\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\r\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\r\n'),a.put("src/templates/waveSpinner.html",'\r\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file +/*! angular-spinkit 2016-02-22 */ +"use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector","$rootScope",function(a,b,c){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(d,e,f){var g,h,i=d.spinkitImagePreloaderClass||"spinner-wrapper";b.has(f.$normalize(d.spinkitImagePreloader)+"Directive")&&(g=angular.element("
").addClass(i),h=a("<"+d.spinkitImagePreloader+"/>")(d),g.append(h),g.css("overflow","hidden"),e.after(g),e.css("width")&&g.css("width",e.css("width")),f.width&&g.css("width",f.width+"px"),e.css("height")&&g.css("height",e.css("height")),f.height&&g.css("height",f.height+"px"),e.on("load",function(){g.css("display","none"),e.css("display","block"),c.$broadcast("angular-spinkit:imageLoaded")}),d.$watch("ngSrc",function(){g.css("display","block"),e.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'\n'),a.put("src/templates/circleSpinner.html",'\n'),a.put("src/templates/cubeGridSpinner.html",''),a.put("src/templates/doubleBounceSpinner.html",'\n'),a.put("src/templates/fadingCircleSpinner.html",''),a.put("src/templates/pulseSpinner.html",'\n'),a.put("src/templates/rotatingPlaneSpinner.html",'\n'),a.put("src/templates/threeBounceSpinner.html",''),a.put("src/templates/wanderingCubesSpinner.html",'\n'),a.put("src/templates/waveSpinner.html",'\n'),a.put("src/templates/wordPressSpinner.html",'')}]); \ No newline at end of file diff --git a/package.json b/package.json index 0ead67d..a8e6433 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "angular-spinkit", "main": "build/angular-spinkit.js", - "version": "0.3.3", + "version": "0.3.4", "devDependencies": { "grunt": "~0.4.2", "grunt-angular-templates": "~0.5.1", From 18afb2078eb5a80c4e71b33f2836467d4a591148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Rzepi=C5=84ski?= Date: Sun, 10 Jul 2016 09:16:52 +0200 Subject: [PATCH 10/10] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 57b105b..a76ff61 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,10 @@ angular-spinkit SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS +## ng2-spin-kit - SpinKit spinners for AngularJS 2.x + +https://github.com/WoltersKluwerPL/ng2-spin-kit + ## Usage 1. Install with bower: