lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: pjax loading add animation icon

This commit is contained in:
XPoet 2021-01-06 23:31:00 +08:00
parent 77a4883026
commit 2e91668be1
4 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layout/_partial/progress-bar.ejs
View File

@ -1,4 +1,11 @@
<div class="progress-bar-container">
<span class="scroll-progress-bar"></span>
<span class="loading-progress-bar"></span>
<% if (theme.pjax.enable === true) { %>
<span class="loading-progress-bar"></span>
<span class="loading-progress-circle">
<i class="fas fa-circle-notch fa-spin"></i>
</span>
<% } %>
</div>

2
layout/_partial/scripts.ejs
View File

@ -14,7 +14,7 @@
<%- __js('js/code-copy.js') %>
<% } %>
<div class="post-scripts <%= theme.pjax.enable === true ? 'pjax' : '' %>">
<div class="post-scripts<%= theme.pjax.enable === true ? ' pjax' : '' %>">
<% if (theme.toc.enable && is_post()) { %>
<%- __js([
'js/left-side-toggle.js',

26
source/css/layout/_partial/progress-bar.styl
View File

@ -12,7 +12,7 @@
height: 1px;
width: 0;
background: var(--loading-progress-bar-color);
box-shadow: 0 1px 3px var(--loading-progress-bar-color);
box-shadow: 0 1px 2px var(--loading-progress-bar-color);
visibility: hidden;
opacity: 0;
z-index: $z-index-8;
@ -26,6 +26,30 @@
}
.loading-progress-circle {
position: absolute;
top: 0;
right: 0;
z-index: $z-index-8;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 8px 0 0;
color: var(--default-text-color);
visibility: hidden;
transition();
&.show {
transition: visibility 0.1s linear;
visibility: visible;
}
i {
font-size: 1.12rem;
}
}
.scroll-progress-bar {
position: absolute;
top: 0;

9
source/js/utils.js
View File

@ -8,6 +8,7 @@ KEEP.initUtils = () => {
firstScreen_dom: document.querySelector('.first-screen-container'),
scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
loadingProgressBar_dom: document.querySelector('.loading-progress-bar'),
loadingProgressCircle_dom: document.querySelector('.loading-progress-circle'),
innerHeight: window.innerHeight,
loadingProgressBarTimer: null,
@ -252,15 +253,16 @@ KEEP.initUtils = () => {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.loadingProgressBar_dom.style.width = '0';
this.scrollProgressBar_dom.classList.add('hide');
this.loadingProgressCircle_dom.classList.add('show');
let width = 20;
const maxWidth = 95;
let width = 5;
const maxWidth = 99;
this.loadingProgressBar_dom.classList.add('show');
this.loadingProgressBar_dom.style.width = width + '%';
this.loadingProgressBarTimer = setInterval(() => {
width += parseInt((Math.random() * 10).toFixed(2));
width += 5;
if (width > maxWidth) width = maxWidth;
this.loadingProgressBar_dom.style.width = width + '%';
}, 100);
@ -273,6 +275,7 @@ KEEP.initUtils = () => {
const tempTimeout = setTimeout(() => {
this.loadingProgressBar_dom.classList.remove('show');
this.loadingProgressCircle_dom.classList.remove('show');
this.scrollProgressBar_dom.classList.remove('hide');
clearTimeout(tempTimeout);
}, 200);