Skip to content

S
sdkjs
Commit e25a042f authored by Alexander.Trofimov's avatar Alexander.Trofimov Committed by Alexander.Trofimov
Browse files
Options

update index.html 

git-svn-id: svn://192.168.3.15/activex/AVS/Sources/TeamlabOffice/trunk/OfficeWeb@60274 954022d7-b5bf-4e40-9824-e11837661b57
parent 13888724
Show whitespace changes
Inline Side-by-side
Showing with 362 additions and 80 deletions
Excel/index.html
View file @ e25a042f
......@@ -15,39 +15,137 @@
<!-- splash -->
<style type="text/css">
.loadmask {
.loader-page {
top: 50%;
left: 50%;
width: 50px;
height: 180px;
z-index: 100;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
z-index: 20002;
margin-top: -100px;
}
.loadmask-body {
position:relative;
top:44%;
.romb {
width: 40px;
height: 40px;
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
-moz-transform: rotate(135deg) skew(20deg, 20deg);
-ms-transform: rotate(135deg) skew(20deg, 20deg);
-o-transform: rotate(135deg) skew(20deg, 20deg);
position: absolute;
background: red;
border-radius: 6px;
-webkit-animation: movedown 3s infinite ease;
-moz-animation: movedown 3s infinite ease;
-ms-animation: movedown 3s infinite ease;
-o-animation: movedown 3s infinite ease;
animation: movedown 3s infinite ease;
}
#blue {
z-index: 3;
background: #55bce6;
-webkit-animation-name: blue;
-moz-animation-name: blue;
-ms-animation-name: blue;
-o-animation-name: blue;
animation-name: blue;
}
#red {
z-index:1;
background: #de7a59;
-webkit-animation-name: red;
-moz-animation-name: red;
-ms-animation-name: red;
-o-animation-name: red;
animation-name: red;
}
#green {
z-index: 2;
background: #a1cb5c;
-webkit-animation-name: green;
-moz-animation-name: green;
-ms-animation-name: green;
-o-animation-name: green;
animation-name: green;
}
@-webkit-keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0;}
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
.loadmask-logo {
display:inline-block;
min-width:220px;
min-height:62px;
vertical-align:top;
background-image:url('./resources/img/loading-logo.gif');
background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x);
background-repeat:no-repeat;
@keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0; }
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
@-webkit-keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0; opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@-webkit-keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
@keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
</style>
</head>
<body>
<div id="loading-mask" class="loadmask">
<div class="loadmask-body" align="center">
<div class="loadmask-logo"></div>
</div>
<div id="loading-mask" class="loader-page">
<div class="romb" id="blue"></div>
<div class="romb" id="green"></div>
<div class="romb" id="red"></div>
</div>
<div id="viewport"></div>
......
PowerPoint/index.html
View file @ e25a042f
......@@ -13,39 +13,137 @@
<!-- splash -->
<style type="text/css">
.loadmask {
.loader-page {
top: 50%;
left: 50%;
width: 50px;
height: 180px;
z-index: 100;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
z-index: 20002;
margin-top: -100px;
}
.loadmask-body {
position:relative;
top:44%;
.romb {
width: 40px;
height: 40px;
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
-moz-transform: rotate(135deg) skew(20deg, 20deg);
-ms-transform: rotate(135deg) skew(20deg, 20deg);
-o-transform: rotate(135deg) skew(20deg, 20deg);
position: absolute;
background: red;
border-radius: 6px;
-webkit-animation: movedown 3s infinite ease;
-moz-animation: movedown 3s infinite ease;
-ms-animation: movedown 3s infinite ease;
-o-animation: movedown 3s infinite ease;
animation: movedown 3s infinite ease;
}
#blue {
z-index: 3;
background: #55bce6;
-webkit-animation-name: blue;
-moz-animation-name: blue;
-ms-animation-name: blue;
-o-animation-name: blue;
animation-name: blue;
}
#red {
z-index:1;
background: #de7a59;
-webkit-animation-name: red;
-moz-animation-name: red;
-ms-animation-name: red;
-o-animation-name: red;
animation-name: red;
}
#green {
z-index: 2;
background: #a1cb5c;
-webkit-animation-name: green;
-moz-animation-name: green;
-ms-animation-name: green;
-o-animation-name: green;
animation-name: green;
}
@-webkit-keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0;}
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
@keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0; }
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
@-webkit-keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0; opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@-webkit-keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
.loadmask-logo {
display:inline-block;
min-width:220px;
min-height:62px;
vertical-align:top;
background-image:url('./resources/img/loading-logo.gif');
background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x);
background-repeat:no-repeat;
@keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
</style>
</head>
<body>
<div id="loading-mask" class="loadmask">
<div class="loadmask-body" align="center">
<div class="loadmask-logo"></div>
</div>
<div id="loading-mask" class="loader-page">
<div class="romb" id="blue"></div>
<div class="romb" id="green"></div>
<div class="romb" id="red"></div>
</div>
<div id="viewport"></div>
......
Word/index.html
View file @ e25a042f
......@@ -13,51 +13,137 @@
<!-- splash -->
<style type="text/css">
.loadmask {
.loader-page {
top: 50%;
left: 50%;
width: 50px;
height: 180px;
z-index: 100;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
z-index: 20002;
margin-top: -100px;
}
.loadmask-body {
position:relative;
top:44%;
.romb {
width: 40px;
height: 40px;
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
-moz-transform: rotate(135deg) skew(20deg, 20deg);
-ms-transform: rotate(135deg) skew(20deg, 20deg);
-o-transform: rotate(135deg) skew(20deg, 20deg);
position: absolute;
background: red;
border-radius: 6px;
-webkit-animation: movedown 3s infinite ease;
-moz-animation: movedown 3s infinite ease;
-ms-animation: movedown 3s infinite ease;
-o-animation: movedown 3s infinite ease;
animation: movedown 3s infinite ease;
}
#blue {
z-index: 3;
background: #55bce6;
-webkit-animation-name: blue;
-moz-animation-name: blue;
-ms-animation-name: blue;
-o-animation-name: blue;
animation-name: blue;
}
#red {
z-index:1;
background: #de7a59;
-webkit-animation-name: red;
-moz-animation-name: red;
-ms-animation-name: red;
-o-animation-name: red;
animation-name: red;
}
#green {
z-index: 2;
background: #a1cb5c;
-webkit-animation-name: green;
-moz-animation-name: green;
-ms-animation-name: green;
-o-animation-name: green;
animation-name: green;
}
.loadmask-logo {
display: inline-block;
min-width:220px;
min-height:62px;
vertical-align: top;
background-image: url('./resources/img/loading-logo.gif');
background-repeat: no-repeat;
@-webkit-keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0;}
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
@media only screen and (min-resolution: 192dpi) {
.loadmask-logo {
background-image: url('./resources/img/loading-logo@2x.gif');
background-size: 220px auto;
@keyframes red {
0% { top:120px; background: #de7a59; }
10% { top:120px; background: #F2CBBF; }
14% { background: #fff; top:120px; }
15% { background: #fff; top:0; }
20% { background: #E6E4E4; }
30% { background: #D2D2D2; }
40% { top:120px; }
100% { top:120px; background: #de7a59; }
}
@media (-webkit-min-device-pixel-ratio: 0) {
background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x);
background-size: auto;
@-webkit-keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0; opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@keyframes green {
0% { top:110px; background: #a1cb5c; opacity:1; }
10% { top:110px; background: #CBE0AC; opacity:1; }
14% { background: #fff; top:110px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #EFEFEF; top:0; opacity:1; }
30% { background:#E6E4E4; }
70% { top:110px; }
100% { top:110px; background: #a1cb5c; }
}
@-webkit-keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
@keyframes blue {
0% { top:100px; background: #55bce6; opacity:1; }
10% { top:100px; background: #BFE8F8; opacity:1; }
14% { background: #fff; top:100px; opacity:1; }
15% { background: #fff; top:0;opacity:1; }
20% { background: #ffffff; top:0; opacity:0; }
25% { background: #ffffff; top:0; opacity:0; }
45% { background: #EFEFEF; top:0;opacity:0,2; }
100% { top:100px; background: #55bce6; }
}
</style>
</head>
<body>
<div id="loading-mask" class="loadmask">
<div class="loadmask-body" align="center">
<div class="loadmask-logo"></div>
</div>
<div id="loading-mask" class="loader-page">
<div class="romb" id="blue"></div>
<div class="romb" id="green"></div>
<div class="romb" id="red"></div>
</div>
<div id="viewport"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7