【修复】加载动画

Hamud-Lang · May 22, 2024 · bcb0262 · bcb0262
1 parent 3370913
commit bcb0262
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 40 deletions.
diff --git a/assets/load_ani.js b/assets/load_ani.js
diff --git a/assets/override.js b/assets/override.js
@@ -99,6 +99,26 @@
 	}
 
 
+	var loadingBar = document.querySelector(".loading-bar");
+    var progress = document.querySelector(".loading-bar .progress");
+    var timer = null;
+
+	function initAni() {
+        loadingBar = document.querySelector(".loading-bar");
+        progress = document.querySelector(".loading-bar .progress");
+    }
+
+	function endLoad(){
+        clearInterval(timer);
+        progress.style.width = "100%";
+        loadingBar.classList.remove("loading");
+
+        setTimeout(function () {
+            progress.style.width = 0;
+        }, 400);
+    }
+
+
 	// PJAX 集成
 	let pjax;
 	//// 初始化 PJAX
@@ -128,6 +148,7 @@
 	function initialize() {
 		initPjax();	 //// 初始化 PJAX
 		initTranslate();	//// 初始化页面翻译
+		initAni();    //// 初始化加载动画
 		SetupGiscus(getCurrentLanguage(), getCurrentTheme());   //// 初始化评论系统
 	}
 
@@ -139,8 +160,28 @@
 	translate.listener.renderTaskFinish = function() {
 		SetupGiscus(getCurrentLanguage(), getCurrentTheme());
 	}
+	//// Pjax 开始时执行的函数
+    document.addEventListener("pjax:send", function () {
+        var loadingBarWidth = 20;
+        var MAX_LOADING_WIDTH = 95;
+
+        loadingBar.classList.add("loading");
+        progress.style.width = loadingBarWidth + "%";
+
+        clearInterval(timer);
+        timer = setInterval(function () {
+            loadingBarWidth += 3;
+
+            if (loadingBarWidth > MAX_LOADING_WIDTH) {
+                loadingBarWidth = MAX_LOADING_WIDTH;
+            }
+
+            progress.style.width = loadingBarWidth + "%";
+        }, 500);
+    });
 	//// 监听 Pjax 完成后，重新加载上面的函数
 	document.addEventListener("pjax:complete", function () {
 		SetupGiscus(getCurrentLanguage(), getCurrentTheme());
+		endLoad();
 	})
 })();