apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

implemented new page-loader animated icon

Browse Source
pull/2/head
Rafael Caferati 10 years ago
parent 3040906335
commit 5642e69213
4 changed files with 196 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      client/stylesheets/base.less
  2. 4
      client/stylesheets/utils/_lesshat.import.less
  3. 153
      client/stylesheets/utils/_preloader.import.less
  4. 41
      client/views/loading.html

1
client/stylesheets/base.less
Unescape View File

@ -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);

4
client/stylesheets/utils/_lesshat.import.less vendored
Unescape View File

@ -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(...) {

153
client/stylesheets/utils/_preloader.import.less vendored
Unescape View File

@ -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);
}
}
}

41
client/views/loading.html
Unescape View File

@ -1,3 +1,42 @@
<template name="loading">
<div class="loading"> </div>
<svg class="rocket-loader" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<path class="outer" fill="#BE1E2D" d="M11.963,135.176c8.945,3.178,19.217,4.99,30.147,4.99c12.077,0,23.351-2.201,32.9-6.02
c10.361,2.409,21.987,3.764,34.272,3.764c43.495,0,78.754-16.97,78.754-37.91c0-20.941-35.259-37.91-78.754-37.91
c-12.285,0-23.91,1.354-34.272,3.764c-9.549-3.818-20.823-6.021-32.9-6.021c-10.931,0-21.202,1.814-30.147,4.992
c10.426,4.333,18.468,13.467,21.573,24.759C31.577,92.896,30.53,96.39,30.53,100s1.047,7.104,3.006,10.416
C30.431,121.707,22.389,130.843,11.963,135.176z"/>
<path class="inner" fill="#E6E7E8" d="M44.657,127.042c4.784,0.867,10.099,0.848,15.588-0.24c4.775-0.946,9.18-2.613,13.006-4.786
c2.519,0.706,5.163,1.335,7.916,1.885c8.502,1.685,18.034,2.643,28.116,2.643c35.69,0,64.609-11.907,64.609-26.597
c0-14.689-28.919-26.596-64.609-26.596c-10.082,0-19.613,0.958-28.116,2.643c-16.401,3.271-28.947,9.315-34.028,16.644
c-1.607,2.324-2.464,4.777-2.464,7.311c0,2.533,0.857,4.986,2.464,7.309c1.408,2.025,3.394,3.96,5.876,5.765
C52.084,118.824,49.042,123.921,44.657,127.042z"/>
<g>
<g>
<g>
<defs>
<path id="SVGID_1_" d="M44.657,122.749c9.114,1.52,19.101,0.337,28.595-4.625c2.519,0.651,5.163,1.228,7.916,1.732
c8.502,1.552,18.034,2.434,28.116,2.434c35.69,0,64.609-10.954,64.609-24.471c0-13.514-28.919-24.469-64.609-24.469
c-10.082,0-19.613,0.881-28.116,2.431c-16.4,3.009-28.946,8.571-34.027,15.313c-1.607,2.138-2.464,4.396-2.464,6.726
C44.674,100.149,49.042,119.877,44.657,122.749z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M44.657,127.042c4.784,0.867,10.099,0.848,15.588-0.24
c4.775-0.946,9.18-2.613,13.006-4.786c2.519,0.706,5.163,1.335,7.916,1.885c8.502,1.685,18.034,2.643,28.116,2.643
c35.69,0,64.609-11.907,64.609-26.597c0-14.689-28.919-26.596-64.609-26.596c-10.082,0-19.613,0.958-28.116,2.643
c-16.401,3.271-28.947,9.315-34.028,16.644c-1.607,2.324-2.464,4.777-2.464,7.311c0,2.533,0.857,4.986,2.464,7.309
c1.408,2.025,3.394,3.96,5.876,5.765C52.084,118.824,49.042,123.921,44.657,127.042z"/>
</g>
</g>
</g>
<g>
<circle fill="#BE1E2D" cx="134.633" cy="100.505" r="7.973"/>
<circle fill="#BE1E2D" cx="107.854" cy="100.505" r="7.973"/>
<circle fill="#BE1E2D" cx="81.076" cy="100.506" r="7.974"/>
</g>
</g>
</svg>
</template>

Write Preview
Loading…
Cancel
Save