theme: add loading progressbar

do not show page until at least the stylesheet is loaded
3 years ago · caa6775d65
parent bbcb48beeb
commit caa6775d65
5 changed files with 140 additions and 0 deletions
--- a/theme/default/home.hbs
+++ b/theme/default/home.hbs
@ -5,6 +5,7 @@
        <link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
    </head>
    <body>
+        {{> loading.hbs }}
        <div class="page-wrapper">
            {{> sidebar.hbs }}
            <div class="post-list">
--- a/theme/default/inline_style.hbs
+++ b/theme/default/inline_style.hbs
@ -0,0 +1,124 @@
+<style>
+    /* Do not show content until the main CSS is loaded (which overrides opacity) */
+    .page-wrapper {
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+    }
+
+    .loading-progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 2px;
+    }
+
+    /* https://codepen.io/holdencreative/pen/vEVbwv */
+    .progress {
+        position: relative;
+        height: 2px;
+        display: block;
+        width: 100%;
+        background-clip: padding-box;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    .progress .indeterminate {
+        background-color: #E91E63;
+    }
+
+    .progress .indeterminate:before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    .progress .indeterminate:after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        -webkit-animation-delay: 1.15s;
+        animation-delay: 1.15s;
+    }
+
+    @-webkit-keyframes indeterminate {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    @keyframes indeterminate {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    @-webkit-keyframes indeterminate-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+
+    @keyframes indeterminate-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+</style>
--- a/theme/default/loading.hbs
+++ b/theme/default/loading.hbs
@ -0,0 +1,6 @@
+{{> inline_style.hbs }}
+<div class="loading-progress">
+    <div class="progress">
+        <div class="indeterminate"></div>
+    </div>
+</div>
--- a/theme/default/post.hbs
+++ b/theme/default/post.hbs
@ -5,6 +5,7 @@
        <link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
    </head>
    <body>
+        {{> loading.hbs }}
        <div class="page-wrapper">
            {{> sidebar.hbs }}
            <article class="content">
--- a/theme/default/static/style.css
+++ b/theme/default/static/style.css
@ -16,6 +16,14 @@ html {
    background-attachment: fixed;
 }

+.page-wrapper {
+    opacity: 1 !important;
+}
+
+.loading-progress {
+    display: none !important;
+}
+
 .hidden {
    display: none;
 }