diff --git a/src/app/styles/_loader.scss b/src/app/styles/_loader.scss new file mode 100644 index 0000000..748bfe6 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/app/styles/_navigation.scss b/src/app/styles/_navigation.scss index 2769037..c24f92f 100644 --- a/src/app/styles/_navigation.scss +++ b/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; diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss index 2ec90d0..1911a3e 100644 --- a/src/app/styles/main.scss +++ b/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} diff --git a/src/app/wizard/scripts/handshakeController.js b/src/app/wizard/scripts/handshakeController.js index 1293e0c..b91c725 100644 --- a/src/app/wizard/scripts/handshakeController.js +++ b/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 diff --git a/src/app/wizard/scripts/services.js b/src/app/wizard/scripts/services.js index 6eacf2b..dcd7381 100644 --- a/src/app/wizard/scripts/services.js +++ b/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; } diff --git a/src/app/wizard/scripts/wizard.js b/src/app/wizard/scripts/wizard.js index 9fcf1fd..d5acf4a 100644 --- a/src/app/wizard/scripts/wizard.js +++ b/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 = {}; diff --git a/src/app/wizard/wifi_enter.html b/src/app/wizard/wifi_enter.html index b8c8db1..e75e7fd 100644 --- a/src/app/wizard/wifi_enter.html +++ b/src/app/wizard/wifi_enter.html @@ -1,11 +1,11 @@ -