From 5642e692138d4ce22df7560b466f3d4f83382919 Mon Sep 17 00:00:00 2001 From: Rafael Caferati Date: Mon, 25 May 2015 01:37:08 +0200 Subject: [PATCH] implemented new page-loader animated icon --- client/stylesheets/base.less | 1 + client/stylesheets/utils/_lesshat.import.less | 4 +- .../stylesheets/utils/_preloader.import.less | 153 ++++++++++++++++++ client/views/loading.html | 41 ++++- 4 files changed, 196 insertions(+), 3 deletions(-) create mode 100644 client/stylesheets/utils/_preloader.import.less diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less index c4bf39ebed7d..28cda37295dc 100644 --- a/client/stylesheets/base.less +++ b/client/stylesheets/base.less @@ -1,6 +1,7 @@ @import "utils/_lesshat.import.less"; @import "utils/_reset.import.less"; @import "utils/_keyframes.import.less"; +@import "utils/_preloader.import.less"; @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900); @import url(http://fonts.googleapis.com/css?family=Muli:400,300,500); diff --git a/client/stylesheets/utils/_lesshat.import.less b/client/stylesheets/utils/_lesshat.import.less index a4778fb4d1d8..c08d552d2804 100755 --- a/client/stylesheets/utils/_lesshat.import.less +++ b/client/stylesheets/utils/_lesshat.import.less @@ -505,8 +505,8 @@ } .keyframes(...) { - @process: ~`(function(e){function r(r,t,c){var i="}\n",u=n.split(/(^[a-zA-Z0-9-]+),/g),s=t+" "+u[1]+"{",o=["-webkit-","-moz-","-ms-",""];c?a.forEach(function(r){-1!==e.indexOf(r)&&(u[2]=u[2].replace(new RegExp(r,"g"),function(e){return c+e}))}):u[2]=u[2].replace(/{([^}]+)}/g,function(e,r){var t=r.split(";");t.forEach(function(e,r){a.forEach(function(n){-1!==e.indexOf(n)&&(t[r]="",o.forEach(function(a){t[r]+=e.trim().replace(new RegExp(n,"g"),function(e){return a+e})+";"}))})});var n=t.join(";").replace(/;;/g,";");return e.replace(r,n)}),s+=u[2]+i,"start"==r?e="0; } \n"+s:"startend"==r?e="0; } \n"+s.replace(i,""):e+="end"==r?s.replace(i,""):s}e=e||8121991;var t="@{state}",n=e;if(8121991==e)return e;var a=["animation","transform","filter"];switch(t){case"1":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"2":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"3":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"4":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"5":r("start","@-webkit-keyframes","-webkit-"),r("end","@-moz-keyframes","-moz-");break;case"6":r("start","@-webkit-keyframes","-webkit-"),r("end","@-o-keyframes","-o-");break;case"7":r("start","@-webkit-keyframes","-webkit-"),r("end","@keyframes");break;case"8":r("startend","@-webkit-keyframes","-webkit-");break;case"9":r("start","@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"10":r("start","@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"11":r("start","@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"12":r("startend","@-moz-keyframes","-moz-");break;case"13":r("start","@-o-keyframes","-o-"),r("end","@keyframes");break;case"14":r("startend","@-o-keyframes","-o-");break;case"15":r("startend","@keyframes")}return e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; - @state: 1; lesshat-selector { -lh-property: @process; } + @process: ~`(function(e){function r(r,t,c){var i="}\n",u=n.split(/(^[a-zA-Z0-9-]+),/g),s=t+" "+u[1]+"{",o=["-webkit-","-moz-","-ms-",""];c?a.forEach(function(r){-1!==e.indexOf(r)&&(u[2]=u[2].replace(new RegExp(r,"g"),function(e){return c+e}))}):u[2]=u[2].replace(/{([^}]+)}/g,function(e,r){var t=r.split(";");t.forEach(function(e,r){a.forEach(function(n){-1!==e.indexOf(n)&&(t[r]="",o.forEach(function(a){t[r]+=e.trim().replace(new RegExp(n,"g"),function(e){return a+e})+";"}))})});var n=t.join(";").replace(/;;/g,";");return e.replace(r,n)}),s+=u[2]+i,"start"==r?e="0; } \n"+s:"startend"==r?e="0; } \n"+s.replace(i,""):e+="end"==r?s.replace(i,""):s}e=e||8121991;var t="@{state}",n=e;if(8121991==e)return e;var a=["animation","transform","filter"];switch(t){case"1":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"2":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"3":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"4":r("start","@-webkit-keyframes","-webkit-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"5":r("start","@-webkit-keyframes","-webkit-"),r("end","@-moz-keyframes","-moz-");break;case"6":r("start","@-webkit-keyframes","-webkit-"),r("end","@-o-keyframes","-o-");break;case"7":r("start","@-webkit-keyframes","-webkit-"),r("end","@keyframes");break;case"8":r("startend","@-webkit-keyframes","-webkit-");break;case"9":r("start","@-moz-keyframes","-moz-"),r(null,"@-o-keyframes","-o-"),r("end","@keyframes");break;case"10":r("start","@-moz-keyframes","-moz-"),r("end","@-o-keyframes","-o-");break;case"11":r("start","@-moz-keyframes","-moz-"),r("end","@keyframes");break;case"12":r("startend","@-moz-keyframes","-moz-");break;case"13":r("start","@-o-keyframes","-o-"),r("end","@keyframes");break;case"14":r("startend","@-o-keyframes","-o-");break;case"15":r("startend","@keyframes")}return e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`; + @state: 1; lesshat-selector { -lh-property: @process; } } .opacity(...) { diff --git a/client/stylesheets/utils/_preloader.import.less b/client/stylesheets/utils/_preloader.import.less new file mode 100644 index 000000000000..c40e6c9c41b5 --- /dev/null +++ b/client/stylesheets/utils/_preloader.import.less @@ -0,0 +1,153 @@ +@-webkit-keyframes scaled { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.55)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@-moz-keyframes scaled { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.55)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@-o-keyframes scaled { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.55)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@keyframes scaled { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.55)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + + +@-webkit-keyframes minor { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.08)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@-moz-keyframes minor { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.08)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@-o-keyframes minor { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.08)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +@keyframes minor { + 0% { + .transform(scale(1)); + } + 20% { + .transform(scale(1.08)); + } + 50%{ + .transform(scale(1)); + } + 100% { + .transform(scale(1)); + } +} + +.rocket-loader{ + position: fixed; + top: 50%; + left: 50%; + margin-left: -75px; + margin-top: -75px; + z-index: 9999; + width: 150px; + height: 150px; + .inner{ + .animation(minor 1.2s ease-out infinite 2.012s); + .transform-origin(100px, 100px); + } + .outer{ + .animation(minor 1.2s ease-out infinite 2.012s); + .transform-origin(100px, 100px); + } + circle{ + &:nth-child(1){ + .animation(scaled 1.2s ease-out infinite .4s); + .transform-origin(135px, 100px); + } + &:nth-child(2){ + .animation(scaled 1.2s ease-out infinite .2s); + .transform-origin(108px, 100px); + } + &:nth-child(3){ + .animation(scaled 1.2s ease-out infinite); + .transform-origin(81px, 100px); + } + } +} \ No newline at end of file diff --git a/client/views/loading.html b/client/views/loading.html index aa8a51555d1f..de269a955c67 100644 --- a/client/views/loading.html +++ b/client/views/loading.html @@ -1,3 +1,42 @@