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,6 +5,7 @@
|
||||||
<link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
|
<link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
{{> loading.hbs }}
|
||||||
<div class="page-wrapper">
|
<div class="page-wrapper">
|
||||||
{{> sidebar.hbs }}
|
{{> sidebar.hbs }}
|
||||||
<div class="post-list">
|
<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 }}"/>
|
<link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
{{> loading.hbs }}
|
||||||
<div class="page-wrapper">
|
<div class="page-wrapper">
|
||||||
{{> sidebar.hbs }}
|
{{> sidebar.hbs }}
|
||||||
<article class="content">
|
<article class="content">
|
||||||
|
|
|
@ -16,6 +16,14 @@ html {
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-wrapper {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-progress {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue