feat: add loading progress bar

This commit is contained in:
XPoet 2021-01-06 18:36:28 +08:00
parent 621b8b5071
commit 38bf8bc867
10 changed files with 252 additions and 191 deletions

View File

@ -5,21 +5,27 @@
selectors: [ selectors: [
'head title', 'head title',
'.page-container', '.page-container',
'.pjax', '.pjax'
], ],
history: true, history: true,
debug: false, debug: false,
cacheBust: false, cacheBust: false,
timeout: 0, timeout: 0,
// analytics: false, analytics: false,
// currentUrlFullReload: false, currentUrlFullReload: false,
// scrollRestoration: false, scrollRestoration: false,
// scrollTo: true, // scrollTo: true,
}); });
window.addEventListener('pjax:complete', () => {
KEEP.refresh(); document.addEventListener('pjax:send', () => {
KEEP.utils.loadingProgressBarStart();
});
document.addEventListener('pjax:complete', () => {
KEEP.utils.loadingProgressBarEnd();
pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script')); pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
KEEP.refresh();
}); });
}); });
</script> </script>

View File

@ -0,0 +1,4 @@
<div class="progress-bar-container">
<span class="scroll-progress-bar"></span>
<span class="loading-progress-bar"></span>
</div>

View File

@ -1,15 +1,10 @@
<div class="page-container"> <%- partial('_partial/progress-bar') %>
<main class="page-container">
<% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %> <% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %>
<%- partial('_partial/first-screen') %> <%- partial('_partial/first-screen') %>
<% } %> <% } %>
<header class="page-header">
<div class="header-progress"></div>
</header>
<main class="page-main">
<div class="page-main-content"> <div class="page-main-content">
<div class="page-main-content-top"> <div class="page-main-content-top">
@ -18,7 +13,7 @@
<div class="page-main-content-middle"> <div class="page-main-content-middle">
<main class="main-content normal-code-theme"> <div class="main-content normal-code-theme">
<% if (is_home()) { %> <% if (is_home()) { %>
<%- partial('home-content') %> <%- partial('home-content') %>
@ -45,7 +40,7 @@
<%- partial('_partial/empty-page') %> <%- partial('_partial/empty-page') %>
<% } %> <% } %>
</main> </div>
</div> </div>
@ -53,7 +48,6 @@
<%- partial('_partial/footer') %> <%- partial('_partial/footer') %>
</div> </div>
</div> </div>
</main>
<% if (is_post()) { %> <% if (is_post()) { %>
<div class="sidebar-tools"> <div class="sidebar-tools">
@ -66,19 +60,17 @@
</div> </div>
<% if (is_post() && theme.toc.enable === true) { %> <% if (is_post() && theme.toc.enable === true) { %>
<!-- page aside -->
<aside class="page-aside"> <aside class="page-aside">
<%- partial('_partial/toc') %> <%- partial('_partial/toc') %>
</aside> </aside>
<% } %> <% } %>
<!-- image viewer -->
<%- partial('_partial/image-viewer') %> <%- partial('_partial/image-viewer') %>
</div>
<% if (theme.local_search.enable) { %> <% if (theme.local_search.enable) { %>
<%- partial('_partial/local-search') %> <%- partial('_partial/local-search') %>
<% } %> <% } %>
</main>

View File

@ -8,7 +8,7 @@
// ======================================================================================== // ========================================================================================
$header-height = 76px; // $header-height = 76px; //
$header-shrink-height = $header-height * 0.72; // $header-shrink-height = $header-height * 0.72; //
$header-progress-height = 2.8px; // $scroll-progress-bar-height = 2px; //
$main-content-width = 80%; // PC $main-content-width = 80%; // PC
$main-content-width-tablet = 85%; // $main-content-width-tablet = 85%; //
$main-content-width-mobile = 90%; // $main-content-width-mobile = 90%; //
@ -75,6 +75,7 @@ $scroll-bar-bg-color = darken($background-color, 10%);
$link-color = darken($default-text-color, 10%); $link-color = darken($default-text-color, 10%);
$copyright-info-color = #CC0033; $copyright-info-color = #CC0033;
$avatar-background-color = #0066CC; $avatar-background-color = #0066CC;
$loading-progress-bar-color = #990000;
// ======================================================================================== // ========================================================================================
@ -96,7 +97,8 @@ $dark-scroll-bar-color = darken($dark-background-color, 30%);
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%); $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
$dark-link-color = lighten($dark-default-text-color, 10%); $dark-link-color = lighten($dark-default-text-color, 10%);
$dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-copyright-info-color = darken($copyright-info-color, 20%);
$dark-avatar-background-color = darken($avatar-background-color, 20%); $dark-avatar-background-color = darken($avatar-background-color, 10%);
$dark-loading-progress-bar-color = lighten($loading-progress-bar-color, 50%);
// ======================================================================== // ========================================================================
@ -129,6 +131,7 @@ root-color(mode) {
--link-color: mode == 'light' ? $link-color : $dark-link-color; --link-color: mode == 'light' ? $link-color : $dark-link-color;
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color; --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color; --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
--loading-progress-bar-color: mode == 'light' ? $loading-progress-bar-color : $dark-loading-progress-bar-color;
} }

View File

@ -10,14 +10,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: url($first-screen-img) center center / cover no-repeat; background: url($first-screen-img) center center / cover no-repeat;
background-position-y: $header-height - $header-progress-height; background-position-y: $header-height - $scroll-progress-bar-height;
+keep-tablet() { +keep-tablet() {
background-position-y: $header-height * 0.9 - $header-progress-height; background-position-y: $header-height * 0.9 - $scroll-progress-bar-height;
} }
+keep-mobile() { +keep-mobile() {
background-position-y: $header-height * 0.8 - $header-progress-height; background-position-y: $header-height * 0.8 - $scroll-progress-bar-height;
} }
.content { .content {

View File

@ -10,7 +10,7 @@ $menu-bar-line-height = 2.5px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--background-color); background: var(--background-color);
padding-top: $header-progress-height; padding-top: $scroll-progress-bar-height;
transition(); transition();
hover-style(1.02, 1.02); hover-style(1.02, 1.02);

View File

@ -0,0 +1,45 @@
.progress-bar-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: $z-index-9;
.loading-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 0;
background: var(--loading-progress-bar-color);
box-shadow: 0 1px 3px var(--loading-progress-bar-color);
visibility: hidden;
opacity: 0;
z-index: $z-index-8;
transition();
&.show {
transition();
opacity: 1;
visibility: visible;
}
}
.scroll-progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: $scroll-progress-bar-height;
visibility: hidden;
background: var(--primary-color);
transition: all 0.1s ease;
z-index: $z-index-7;
&.hide {
transition: none;
visibility: hidden;
}
}
}

View File

@ -3,32 +3,12 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
.page-container { .page-container {
position: relative; position: relative;
padding-top: $header-progress-height;
transition(); transition();
+keep-tablet() { +keep-tablet() {
padding-left: 0 !important; padding-left: 0 !important;
} }
.page-header {
.header-progress {
visibility: hidden;
position: fixed;
width: 0;
height: $header-progress-height;
top: 0;
left: 0;
background: var(--primary-color);
transition: all 0.1s ease;
z-index: $z-index-7;
}
}
.page-main {
.page-main-content { .page-main-content {
padding-top: $header-height; padding-top: $header-height;
position: relative; position: relative;
@ -131,7 +111,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
width: 100%; width: 100%;
} }
} }
}
.page-aside { .page-aside {

View File

@ -6,6 +6,7 @@
@import "layout/_partial/local-search.styl" @import "layout/_partial/local-search.styl"
@import "layout/_partial/toc.styl" @import "layout/_partial/toc.styl"
@import "layout/_partial/comment/comment.styl" @import "layout/_partial/comment/comment.styl"
@import "layout/_partial/progress-bar.styl"
@import "layout/_partial/header.styl" @import "layout/_partial/header.styl"
@import "layout/_partial/tools.styl" @import "layout/_partial/tools.styl"
@import "layout/_partial/side-tools.styl" @import "layout/_partial/side-tools.styl"

View File

@ -4,11 +4,13 @@ KEEP.initUtils = () => {
html_root_dom: document.querySelector('html'), html_root_dom: document.querySelector('html'),
pageContainer_dom: document.querySelector('.page-container'), pageContainer_dom: document.querySelector('.page-container'),
headerProgress_dom: document.querySelector('.header-progress'),
pageTop_dom: document.querySelector('.page-main-content-top'), pageTop_dom: document.querySelector('.page-main-content-top'),
firstScreen_dom: document.querySelector('.first-screen-container'), firstScreen_dom: document.querySelector('.first-screen-container'),
scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
loadingProgressBar_dom: document.querySelector('.loading-progress-bar'),
innerHeight: window.innerHeight, innerHeight: window.innerHeight,
loadingProgressBarTimer: null,
prevScrollValue: 0, prevScrollValue: 0,
defaultFontSize: 0, defaultFontSize: 0,
@ -31,9 +33,9 @@ KEEP.initUtils = () => {
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0); const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
if (this.headerProgress_dom) { if (this.scrollProgressBar_dom) {
this.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible'; this.scrollProgressBar_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
this.headerProgress_dom.style.width = `${ProgressPercent}%`; this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`;
} }
// hide header handle // hide header handle
@ -125,7 +127,7 @@ KEEP.initUtils = () => {
}); });
}, },
// go comment // go comment anchor
goComment() { goComment() {
this.goComment_dom = document.querySelector('.go-comment'); this.goComment_dom = document.querySelector('.go-comment');
if (this.goComment_dom) { if (this.goComment_dom) {
@ -150,12 +152,10 @@ KEEP.initUtils = () => {
// init page height handle // init page height handle
initPageHeightHandle() { initPageHeightHandle() {
if (this.firstScreen_dom) return; if (this.firstScreen_dom) return;
const temp_h1 = this.getElementHeight('.page-main-content-top');
const temp_h1 = this.getElementHeight('.header-progress'); const temp_h2 = this.getElementHeight('.page-main-content-middle');
const temp_h2 = this.getElementHeight('.page-main-content-top'); const temp_h3 = this.getElementHeight('.page-main-content-bottom');
const temp_h3 = this.getElementHeight('.page-main-content-middle'); const allDomHeight = temp_h1 + temp_h2 + temp_h3;
const temp_h4 = this.getElementHeight('.page-main-content-bottom');
const allDomHeight = temp_h1 + temp_h2 + temp_h3 + temp_h4;
const innerHeight = window.innerHeight; const innerHeight = window.innerHeight;
const pb_dom = document.querySelector('.page-main-content-bottom'); const pb_dom = document.querySelector('.page-main-content-bottom');
if (allDomHeight < innerHeight) { if (allDomHeight < innerHeight) {
@ -245,6 +245,37 @@ KEEP.initUtils = () => {
post && post.forEach(v => { post && post.forEach(v => {
v.innerHTML = this.getHowLongAgo(Date.now() - new Date(v.dataset.date).getTime()) v.innerHTML = this.getHowLongAgo(Date.now() - new Date(v.dataset.date).getTime())
}) })
},
// loading progress bar start
loadingProgressBarStart() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.loadingProgressBar_dom.style.width = '0';
this.scrollProgressBar_dom.classList.add('hide');
let width = 20;
const maxWidth = 95;
this.loadingProgressBar_dom.classList.add('show');
this.loadingProgressBar_dom.style.width = width + '%';
this.loadingProgressBarTimer = setInterval(() => {
width += parseInt((Math.random() * 10).toFixed(2));
if (width > maxWidth) width = maxWidth;
this.loadingProgressBar_dom.style.width = width + '%';
}, 100);
},
// loading progress bar end
loadingProgressBarEnd() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.loadingProgressBar_dom.style.width = '100%';
const tempTimeout = setTimeout(() => {
this.loadingProgressBar_dom.classList.remove('show');
this.scrollProgressBar_dom.classList.remove('hide');
clearTimeout(tempTimeout);
}, 200);
} }
} }