spinner made in place of button for sync

src/app/styles/_loader.scss

@@ -0,0 +1,52 @@
+$offset: 225;
+$duration: 1.5s;
+
+
+.spinnerWrapper {
+  &.hide{
+    display: none;
+  }
+  &.show {
+    display: block;
+    .spinner {
+      animation: rotator $duration linear infinite;
+    }
+  }
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(250deg);
+  }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash $duration ease-in-out infinite, colors ($duration*3) ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% { stroke: #4AA3DF; }
+  33% { stroke: #FB7E00; }
+  66% { stroke: #61CD72; }
+  100% { stroke: #4AA3DF; }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: $offset;
+  }
+  50% {
+    stroke-dashoffset: $offset/4;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: $offset;
+    transform: rotate(450deg);
+  }
+}

src/app/styles/_navigation.scss

@@ -147,6 +147,9 @@ $button-height: $segueWrapperHeight / 2.75;
       &.blocked {
         border: 5px solid $msWhite;
       }
+      &.hide {
+        display: none;
+      }
       &.error {
         -webkit-animation-name: segueError;
         -webkit-animation-duration: $errorTimer;

src/app/styles/main.scss

@@ -27,6 +27,7 @@ $break-sm: 960px;
 @import "handshake";
 @import "media_queries";
 @import "doorbell";
+@import "_loader.scss";
 
 html, body { margin: 0; padding: 0; }
 canvas {vertical-align: top; z-index: 0}

src/app/wizard/scripts/handshakeController.js

@@ -12,6 +12,9 @@ angular.module('app').controller('handshakeController', function($scope, scopePa
 
     $scope.$parent.segueControl = 'blocked';
 
+    $scope.$parent.spinnerControl = 'hide';
+
+
     if ($scope.submittedData.wifi.ssid) {
         $scope.$parent.segueControl = 'ready';
     }
@@ -232,7 +235,8 @@ angular.module('app').controller('handshakeController', function($scope, scopePa
     // Starts the handshake
     function blockSegue() {
         $scope.payload.segueButton = 'ENVIA';
-        $scope.$parent.segueControl = 'blocked';
+        $scope.$parent.segueControl = 'hide';
+        $scope.$parent.spinnerControl = 'show';
     }
 
     //  Handshake finishes and waits for the platform
@@ -243,7 +247,9 @@ angular.module('app').controller('handshakeController', function($scope, scopePa
         $scope.$parent.handShakeState = true;
         $scope.handshakeLabel = 'Hecho! Por favor, espera...';
         $scope.payload.segueButton = 'WAIT';
+        $scope.$parent.spinnerControl = 'hide';
         $scope.$parent.segueControl = 'blocked';
+
     }
 
     //  Platform replies and we move forward

src/app/wizard/scripts/services.js

@@ -453,9 +453,6 @@ angular.module('app').service('SegueService', function() {
             case "make2":
                 tuples=4;
                 break;
-            case "wifi_enter":
-                tuples=5;
-                break;
             default:
                 tuples = 3;
         }

src/app/wizard/scripts/wizard.js

@@ -2,6 +2,8 @@
 
 angular.module('app').controller('wizardCtrl', function($scope, $location, $sce, $window, $timeout, SegueService, $rootScope, AnimationService, session, platform, Restangular, $state) {
 
+    $scope.spinnerControl = 'hide';
+
     /** Submitted User Data **/
     $scope.submittedData = {};
 

src/app/wizard/wifi_enter.html

@@ -1,11 +1,11 @@
-<div class="animate" ng-class="animationRows[4][0]">
+<div class="animate" ng-class="animationRows[3][0]">
     <h2>{{payload.h2}}</h2>
 </div>
-<div class="animate" ng-class="animationRows[4][1]">
+<div class="animate" ng-class="animationRows[3][1]">
     <h4>{{payload.h4}}</h4>
 </div>
 
-<form name="wifi_ssid" class="animate" ng-class="animationRows[5][1]">
+<form name="wifi_ssid" class="animate" ng-class="animationRows[3][2]">
 
     <div class="inputDiv" layout="column" layout-align="center">
         <div  class='inputContainer' layout="row" layout-align="start center">

src/app/wizard/wizard.html

@@ -43,6 +43,11 @@
                 <path d="M187.539062,22.0676084 L196.867188,29.7394834 C196.95573,29.8071921 197,29.8931287 197,29.9972959 C197,30.1170882 196.95573,30.2030248 196.867188,30.2551084 L187.539062,37.9269834 C187.434895,38.0051088 187.317709,38.0155254 187.1875,37.9582334 C187.062499,37.9009415 187,37.8019841 187,37.6613584 L187,22.3332334 C187,22.1926077 187.062499,22.0936504 187.1875,22.0363584 C187.317709,21.9790665 187.434895,21.989483 187.539062,22.0676084 L187.539062,22.0676084 Z" id="directright" stroke="none" fill="#FFFFFF" fill-rule="evenodd"></path>
             </svg>
         </button>
+        <div class="spinnerWrapper" ng-class="spinnerControl">
+            <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+            </svg>
+        </div>
         <button class="yesButton errorButton" ng-click="yes()" ng-class="errorButton" hide-xs>YES</button>
         <button class="noButton errorButton" ng-click="no()"ng-class="errorButton" hide-xs>NO</button>
     </div>