Skip to content

M
mycard
Commit ed7d950c authored by 2breakegg's avatar 2breakegg
Browse files
Options

Loading界面

parent 4c95445a
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 13 deletions
images/CubbitIcon.png 0 → 100644
View file @ ed7d950c
This diff was suppressed by a .gitattributes entry.
images/CubbitLogo.png 0 → 100644
View file @ ed7d950c
This diff was suppressed by a .gitattributes entry.
index.html
View file @ ed7d950c
...@@ -28,24 +28,32 @@ ...@@ -28,24 +28,32 @@
</head> </head>
<body> <body>
<mycard> <mycard>
<nav id="navbar" class="navbar navbar-dark bg-inverse">
<a class="navbar-brand" href="#">MyCard</a>
<div class="navbar-right"> <!--<div id="loading">MyCard <span id="version"></span> Loading...</div>-->
<div id="window-buttons"> <div id="loading-bar">
<i onclick="window.close()" class="fa fa-times"></i> <span class="navbar-brand">MyCard</span>
</div> <i class="fa fa-times close" i18n="" i18n-title="" title="关闭" onclick="window.close()"></i>
</div> </div>
</nav>
<div class="loading">
<div id="loading">MyCard <span id="version"></span> Loading...</div> <img src="./images/CubbitLogo.png">
<p>
LOADING
<span>.</span>
<span>.</span>
<span>.</span>
</p>
</div>
<div id="failed" hidden>发生了错误，请复制以下错误信息并联系 support@mycard.moe</div> <div id="failed" hidden>发生了错误，请复制以下错误信息并联系 support@mycard.moe</div>
<pre id="error" hidden></pre> <pre id="error" hidden></pre>
</mycard> </mycard>
<script> <script>
document.body.classList.add(process.platform); document.body.classList.add(process.platform);
document.getElementById('version').innerHTML = require('electron').remote.app.getVersion(); // document.getElementById('version').innerHTML = require('electron').remote.app.getVersion();
</script> </script>
<!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>--> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body> </body>
</html> </html>
styles.css
View file @ ed7d950c
...@@ -100,4 +100,66 @@ body.resizing /deep/ * { ...@@ -100,4 +100,66 @@ body.resizing /deep/ * {
/*button, input, optgroup, select, textarea {*/ /*button, input, optgroup, select, textarea {*/
/*font-family: inherit;*/ /*font-family: inherit;*/
/*}*/ /*}*/
\ No newline at end of file #loading-bar{
-webkit-app-region: drag;
background: #f7f7f9;
padding-bottom: 4px;
}
#loading-bar>.navbar-brand{
color:#00a4d9;
font-size:24px;
width:190px;
margin: 4px 0 0 0;
text-align:center;
}
#loading-bar>.close {
color:#a7a7a7;
font-size: 18px;
float:right;
margin:17px 18px 0 0;
}
#loading-bar>.close:hover{
color:#000;
}
.loading {
height:100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
.loading p{
position:relative;
top:-15px;
left:10px;
font-weight: 600;
font-size: 30px;
color:#4b99ea;
text-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.loading p>span{
opacity:0;
}
.loading p>span:nth-child(1) {animation:show 2s infinite 0.0s linear;}
.loading p>span:nth-child(2) {animation:show 2s infinite 0.2s linear;}
.loading p>span:nth-child(3) {animation:show 2s infinite 0.4s linear;}
@keyframes show{
from{}
20% {opacity:0;}
21% {opacity:1;}
70% {opacity:1;}
71% {opacity:0;}
to {}
}
.loading>img{
width:300px;
}
@keyframes zhuan{
from{transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
\ No newline at end of file
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