Loading界面

ed7d950c · 2breakegg · 4c95445a · ed7d950c · ed7d950c · ed7d950c
Commit ed7d950c authored Mar 06, 2017 by 2breakegg
Hide whitespace changes
Inline Side-by-side

Showing with 83 additions and 13 deletions

images/CubbitIcon.png images/CubbitIcon.png +0 -0

images/CubbitLogo.png images/CubbitLogo.png +0 -0

index.html index.html +20 -12

styles.css styles.css +63 -1

No files found.
--- a/images/CubbitIcon.png
+++ b/images/CubbitIcon.png
--- a/images/CubbitLogo.png
+++ b/images/CubbitLogo.png
--- a/index.html
+++ b/index.html
@@ -28,24 +28,32 @@
 </head>

 <body>
+
 <mycard>
-    <nav id="navbar" class="navbar navbar-dark bg-inverse">
-        <a class="navbar-brand" href="#">MyCard</a>
-        <div class="navbar-right">
-            <div id="window-buttons">
-                <i onclick="window.close()" class="fa fa-times"></i>
-            </div>
-        </div>
-    </nav>
-
-    <div id="loading">MyCard <span id="version"></span> Loading...</div>
+
+
+    <!--<div id="loading">MyCard <span id="version"></span> Loading...</div>-->
+    <div id="loading-bar">
+        <span class="navbar-brand">MyCard</span>
+        <i class="fa fa-times close" i18n="" i18n-title="" title="关闭" onclick="window.close()"></i>
+    </div>
+
+    <div class="loading">
+    <img src="./images/CubbitLogo.png">
+        <p>
+            LOADING
+            <span>.</span>
+            <span>.</span>
+            <span>.</span>
+        </p>
+    </div>
    <div id="failed" hidden>发生了错误，请复制以下错误信息并联系 support@mycard.moe</div>
    <pre id="error" hidden></pre>
 </mycard>
 <script>
    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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@@ -100,4 +100,66 @@ body.resizing /deep/ * {

 /*button, input, optgroup, select, textarea {*/
 /*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