adds animated spinner and renames text spinner

README.md

@@ -116,12 +116,20 @@ Add `forbiddenFallbad: function` to `app.js`
 
 ### Spinner directive
 
+Show an animated loading indicator graphic.
+
+```html
+<ws-spinner/>
+```
+
+### TextSpinner directive
+
 Show a loading indicator on a button.
 
 ```html
 <button type="submit" class="btn btn-success">
 	Save
-	<ws-spinner ng-show="loading" class="ng-hide"></ws-spinner>
+	<ws-text-spinner ng-show="loading" class="ng-hide"/>
 </button>
 ```
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-worldskills-utils",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "homepage": "https://github.com/worldskills/angular-worldskills-utils",
   "main": "src/angular-worldskills-utils.js",
   "license": "MIT",

src/angular-worldskills-utils.js

@@ -184,7 +184,14 @@
         }];
     });
 
-    utils.directive('wsSpinner', function($interval) {
+    utils.directive('wsSpinner', function () {
+        return {
+          template: '<div ng-show="loading" class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>',
+          restrict: 'E'      
+        };
+    });
+
+    utils.directive('wsTextSpinner', function($interval) {
         return {
             restrict: 'E',
             link: function(scope, element, attrs) {

src/spinner.css

@@ -0,0 +1,53 @@
+/** loading indicator **/
+.spinner {
+  margin: 100px auto;
+  width: 50px;
+  height: 30px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #62b5e5;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+  margin: 0 3px 0 0;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}