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

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

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

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

@ -12,7 +12,7 @@
height: 1px; height: 1px;
width: 0; width: 0;
background: var(--loading-progress-bar-color); 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; visibility: hidden;
opacity: 0; opacity: 0;
z-index: $z-index-8; 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 { .scroll-progress-bar {
position: absolute; position: absolute;
top: 0; top: 0;

9
source/js/utils.js
View File

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