Add init loading workflow.

2026-01-25 14:28:34 +00:00 · 2020-01-03 14:30:34 +08:00 · 2020-01-03 14:30:34 +08:00 · 5b8582c29e
commit 5b8582c29e
parent 03064b18f7
3 changed files with 74 additions and 1 deletions
--- a/src/assets/css/options_page.css
+++ b/src/assets/css/options_page.css
@ -41,6 +41,57 @@ input, textarea {
    font-family: Raleway, Menlo, "Dank Mono", Inconsolata, "Operator Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace!important;
 }

+.loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100%;
+    width: 100%;
+
+    background-color: #fafafa;
+
+    z-index: 200;
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    animation-iteration-count: infinite;
+}
+
+.heartBeat {
+    animation-name: heartBeat;
+    animation-duration: 1.3s;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes heartBeat {
+    0% {
+        transform: scale(1);
+    }
+
+    14% {
+        transform: scale(1.3);
+    }
+
+    28% {
+        transform: scale(1);
+    }
+
+    42% {
+        transform: scale(1.3);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+}
+
 .topnav {
    position: fixed;
    z-index: 200;
@ -151,6 +202,9 @@ input, textarea {

    color: var(--secondary-color);
    font-size: 1.3rem;
+
+    opacity: 1;
+    transition: all .25s ease-out;
 }

 .welcome {
--- a/src/options/options.html
+++ b/src/options/options.html
@ -4,8 +4,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项页 - 简悦 SimpRead</title>
+    <style>
+        .loading{position:fixed;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;background-color:#fafafa;z-index:200}
+    </style>
 </head>
 <body>
+    <div class="loading"><img class="heartBeat animated" src="/assets/images/icon128.png" width="80px"></div>
    <div class="sidebar"></div>
    <div class="topnav nav"></div>
    <div class="header"><div class="nav"></div><div class="title"></div></div>
@ -13,7 +17,7 @@
    <div class="main">
        <div class="tabscontainer"></div>
    </div>
-    <div class="bottom">
+    <div class="bottom" style="opacity:0;">
        <span>简悦 SimpRead - 为你提供「如杂志般沉浸式阅读体验」的扩展</span> <span>&nbsp;©&nbsp;2017&nbsp;-&nbsp;2019&nbsp;<a href="http://ksria.com/simpread">ksria.com</a> by <a href="http://kenshin.wang" target="_blank">Kenshin Wang</a></span>
    </div>
    <script src="../bundle/common.js"></script>
--- a/src/options/options.js
+++ b/src/options/options.js
@ -109,6 +109,7 @@ function tabChange( idx ) {
 */
 storage.Read( first => {
    console.log( "simpread storage get success!", storage.focus, storage.read, first );
+    loadingRender();
    pRead();
    hashnotify();
    firstLoad( first );
@ -122,6 +123,20 @@ storage.Read( first => {
    waves.Render({ root: "body" });
 });

+/**
+ * Loading Render
+ */
+function loadingRender() {
+    setTimeout( () => {
+        $( '.loading' ).animate({
+            opacity: 0,
+        }, () => {
+            $( '.loading' ).remove();
+            $( ".bottom" ).removeAttr( "style" );
+        });
+    }, 1000 );
+}
+
 /**
 * Pure Read
 */