mirror of
https://github.com/ONLYOFFICE/desktop-apps.git
synced 2026-04-07 14:09:22 +08:00
[start page] refactoring for loader
This commit is contained in:
Maxim Kadushkin
106
common/loginpage/src/css/loader.less
Normal file
106
common/loginpage/src/css/loader.less
Normal file
@ -0,0 +1,106 @@
|
||||
@roll-color: #777;
|
||||
|
||||
.roller {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
div {
|
||||
animation: roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
transform-origin: 32px 32px;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: @roll-color;
|
||||
margin: -3px 0 0 -3px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: -0.036s;
|
||||
}
|
||||
|
||||
&:nth-child(1):after {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -0.072s;
|
||||
|
||||
&:after {
|
||||
top: 54px;
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: -0.108s;
|
||||
|
||||
&:after {
|
||||
top: 57px;
|
||||
left: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: -0.144s;
|
||||
|
||||
&:after {
|
||||
top: 58px;
|
||||
left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
animation-delay: -0.18s;
|
||||
|
||||
&:after {
|
||||
top: 57px;
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
animation-delay: -0.216s;
|
||||
|
||||
&:after {
|
||||
top: 54px;
|
||||
left: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
animation-delay: -0.252s;
|
||||
|
||||
&:after {
|
||||
top: 50px;
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
animation-delay: -0.288s;
|
||||
|
||||
&:after {
|
||||
top: 45px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes roller {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -61,77 +61,6 @@
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.loader-page-text {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 80px;
|
||||
margin-top: 125px;
|
||||
color: #888;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.romb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: rotate(135deg) skew(20deg, 20deg);
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
animation: movedown 3s infinite ease;
|
||||
}
|
||||
|
||||
#blue {
|
||||
z-index: 3;
|
||||
background: #55bce6;
|
||||
animation-name: bluetile;
|
||||
}
|
||||
|
||||
#red {
|
||||
z-index:1;
|
||||
background: #de7a59;
|
||||
animation-name: redtile;
|
||||
}
|
||||
|
||||
#green {
|
||||
z-index: 2;
|
||||
background: #a1cb5c;
|
||||
animation-name: greentile;
|
||||
}
|
||||
|
||||
@keyframes redtile {
|
||||
0% { top:120px; background: #de7a59; }
|
||||
10% { top:120px; background: #F2CBBF; }
|
||||
14% { background: #f4f4f4; top:120px; }
|
||||
15% { background: #f4f4f4; top:0; }
|
||||
20% { background: #E6E4E4; }
|
||||
30% { background: #D2D2D2; }
|
||||
40% { top:120px; }
|
||||
100% { top:120px; background: #de7a59; }
|
||||
}
|
||||
|
||||
@keyframes greentile {
|
||||
0% { top:110px; background: #a1cb5c; opacity:1; }
|
||||
10% { top:110px; background: #CBE0AC; opacity:1; }
|
||||
14% { background: #f4f4f4; top:110px; opacity:1; }
|
||||
15% { background: #f4f4f4; top:0; opacity:1; }
|
||||
20% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #EFEFEF; top:0; opacity:1; }
|
||||
30% { background:#E6E4E4; }
|
||||
70% { top:110px; }
|
||||
100% { top:110px; background: #a1cb5c; }
|
||||
}
|
||||
|
||||
@keyframes bluetile {
|
||||
0% { top:100px; background: #55bce6; opacity:1; }
|
||||
10% { top:100px; background: #BFE8F8; opacity:1; }
|
||||
14% { background: #f4f4f4; top:100px; opacity:1; }
|
||||
15% { background: #f4f4f4; top:0; opacity:1; }
|
||||
20% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #fff; top:0; opacity:0; }
|
||||
45% { background: #EFEFEF; top:0; opacity:0,2; }
|
||||
100% { top:100px; background: #55bce6; }
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../../package/fonts/OpenSans-Bold.ttf');
|
||||
@ -180,12 +109,8 @@
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<div id="loading-mask" class="loadmask">
|
||||
<div class="loader-page">
|
||||
<div class="romb" id="blue"></div>
|
||||
<div class="romb" id="green"></div>
|
||||
<div class="romb" id="red"></div>
|
||||
<!-- <div class="loader-page-text">Loading...</div> -->
|
||||
<!-- <img src="loader_48.gif" height="48" width="48"> -->
|
||||
<div id="stage" class="loader-page">
|
||||
<div class="roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="placeholder">
|
||||
|
||||
@ -43,81 +43,9 @@
|
||||
.loader-page {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 180px;
|
||||
position: absolute;
|
||||
margin-top: -100px;
|
||||
/*margin-left: -75px;*/
|
||||
}
|
||||
|
||||
.loader-page-text {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 80px;
|
||||
margin-top: 125px;
|
||||
color: #888;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.romb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: rotate(135deg) skew(20deg, 20deg);
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
animation: movedown 3s infinite ease;
|
||||
}
|
||||
|
||||
#blue {
|
||||
z-index: 3;
|
||||
background: #55bce6;
|
||||
animation-name: bluetile;
|
||||
}
|
||||
|
||||
#red {
|
||||
z-index:1;
|
||||
background: #de7a59;
|
||||
animation-name: redtile;
|
||||
}
|
||||
|
||||
#green {
|
||||
z-index: 2;
|
||||
background: #a1cb5c;
|
||||
animation-name: greentile;
|
||||
}
|
||||
|
||||
@keyframes redtile {
|
||||
0% { top:120px; background: #de7a59; }
|
||||
10% { top:120px; background: #F2CBBF; }
|
||||
14% { background: #f4f4f4; top:120px; }
|
||||
15% { background: #f4f4f4; top:0; }
|
||||
20% { background: #E6E4E4; }
|
||||
30% { background: #D2D2D2; }
|
||||
40% { top:120px; }
|
||||
100% { top:120px; background: #de7a59; }
|
||||
}
|
||||
|
||||
@keyframes greentile {
|
||||
0% { top:110px; background: #a1cb5c; opacity:1; }
|
||||
10% { top:110px; background: #CBE0AC; opacity:1; }
|
||||
14% { background: #f4f4f4; top:110px; opacity:1; }
|
||||
15% { background: #f4f4f4; top:0; opacity:1; }
|
||||
20% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #EFEFEF; top:0; opacity:1; }
|
||||
30% { background:#E6E4E4; }
|
||||
70% { top:110px; }
|
||||
100% { top:110px; background: #a1cb5c; }
|
||||
}
|
||||
|
||||
@keyframes bluetile {
|
||||
0% { top:100px; background: #55bce6; opacity:1; }
|
||||
10% { top:100px; background: #BFE8F8; opacity:1; }
|
||||
14% { background: #f4f4f4; top:100px; opacity:1; }
|
||||
15% { background: #f4f4f4; top:0; opacity:1; }
|
||||
20% { background: #f4f4f4; top:0; opacity:0; }
|
||||
25% { background: #fff; top:0; opacity:0; }
|
||||
45% { background: #EFEFEF; top:0; opacity:0,2; }
|
||||
100% { top:100px; background: #55bce6; }
|
||||
margin-top: -10px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -168,10 +96,8 @@
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<div id="loading-mask" class="loadmask">
|
||||
<div class="loader-page">
|
||||
<div class="romb" id="blue"></div>
|
||||
<div class="romb" id="green"></div>
|
||||
<div class="romb" id="red"></div>
|
||||
<div id="stage" class="loader-page">
|
||||
<div class="roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="placeholder">
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
@import 'component.less';
|
||||
@import 'window.less';
|
||||
@import 'css/loader.less';
|
||||
@import '../vendor/bootstrap/variables.less';
|
||||
@import '../vendor/bootstrap/dropdowns.less';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user