theme: add loading progressbar

do not show page until at least the stylesheet is loaded
This commit is contained in:
Peter Cai 2020-04-10 21:27:05 +08:00
parent bbcb48beeb
commit caa6775d65
No known key found for this signature in database
GPG Key ID: 71F5FB4E4F3FD54F
5 changed files with 140 additions and 0 deletions

View File

@ -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">

View File

@ -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>

View File

@ -0,0 +1,6 @@
{{> inline_style.hbs }}
<div class="loading-progress">
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>

View File

@ -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">

View File

@ -16,6 +16,14 @@ html {
background-attachment: fixed;
}
.page-wrapper {
opacity: 1 !important;
}
.loading-progress {
display: none !important;
}
.hidden {
display: none;
}