theme: add loading progressbar
do not show page until at least the stylesheet is loaded
This commit is contained in:
parent
bbcb48beeb
commit
caa6775d65
5 changed files with 140 additions and 0 deletions
|
@ -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">
|
||||
|
|
124
theme/default/inline_style.hbs
Normal file
124
theme/default/inline_style.hbs
Normal 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>
|
6
theme/default/loading.hbs
Normal file
6
theme/default/loading.hbs
Normal file
|
@ -0,0 +1,6 @@
|
|||
{{> inline_style.hbs }}
|
||||
<div class="loading-progress">
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -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">
|
||||
|
|
|
@ -16,6 +16,14 @@ html {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.loading-progress {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue