diff options
| author | Sergey Linnik <sergey.linnik@onlyoffice.com> | 2021-08-02 11:49:20 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-02 11:49:20 +0300 |
| commit | ae76204d0b32bc674c9c4cc936ef63a0afb58549 (patch) | |
| tree | a6d0f19857c81e5251a0fd9646181d25e8b5963f /templates/loader.html | |
| parent | 926a0be602e8eb147974daa614a4bd444e198e99 (diff) | |
| parent | d751c5e17b7af0ae3da17cf77a8ad6046bd0649a (diff) | |
Merge pull request #502 from ONLYOFFICE/developv7.1.0
Release/7.1.0
Diffstat (limited to 'templates/loader.html')
| -rw-r--r-- | templates/loader.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/templates/loader.html b/templates/loader.html new file mode 100644 index 0000000..0327d21 --- /dev/null +++ b/templates/loader.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html> + <head> +<style type="text/css"> + #body-public #content { + min-height: 100%; + } + + .loadmask{left:0;top:0;position:absolute;height:100%;width:100%;overflow:hidden;border:none;background-color:#f4f4f4;z-index:1001;} + .loader-page{width:100%;height:170px;bottom:42%;position:absolute;text-align:center;line-height:10px;margin-bottom:20px;} + .loader-page-romb{width:40px;display:inline-block;} + .romb{width:40px;height:40px;position:absolute;background:red;border-radius:6px; + -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); + -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:#f4f4f4;top:120px;} + 15%{background:#f4f4f4;top:0;} + 20%{background:#E6E4E4;} + 30%{background:#D2D2D2;} + 40%{top:120px;} + 100%{top:120px;background:#de7a59;} + } + @keyframesred{ + 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;} + } + @-webkit-keyframes green{ + 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 green{ + 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;} + } + @-webkit-keyframes blue{ + 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:#f4f4f4;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:#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;} + } +</style> + </head> + <body> + <div class="loadmask"><div class="loader-page"><div class="loader-page-romb"><div class="romb" id="blue"></div><div class="romb" id="green"></div><div class="romb" id="red"></div></div></div></div> + </body> +</html>
\ No newline at end of file |