From 0cfe2040e7349cb81f709be246086e47ab492446 Mon Sep 17 00:00:00 2001 From: cloud Date: Thu, 1 Sep 2022 19:15:41 +0800 Subject: [PATCH] =?UTF-8?q?JQ=E7=89=87=E6=AE=B5=E6=94=B9=E4=B8=BAJS?= =?UTF-8?q?=E5=8E=9F=E7=94=9F=E5=86=99=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 41 ++++++++++++++++++++++++++++++----------- src/loading.css | 20 ++++++++++---------- src/pace.js | 3 +++ 3 files changed, 43 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index ca8e806..29dc3bf 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,20 @@ + + 页面加载进度效果 + -
+
网 塔 科 @@ -22,32 +25,48 @@
- - - + \ No newline at end of file diff --git a/src/loading.css b/src/loading.css index 4daac79..80b38dd 100644 --- a/src/loading.css +++ b/src/loading.css @@ -1,4 +1,4 @@ -.loading { +#loading { position: fixed; left: 50%; top: calc(50% - 40px); @@ -13,7 +13,7 @@ color: #ffffff; } -.loading.isdone { +#loading.isdone { top: 50%; opacity: 0; -webkit-transition: all .8s; @@ -24,42 +24,42 @@ transition-delay: .5s; } -.loading span { +#loading span { -webkit-animation: loading 1.4s infinite alternate; animation: loading 1.4s infinite alternate; } -.loading span:nth-child(1) { +#loading span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } -.loading span:nth-child(2) { +#loading span:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } -.loading span:nth-child(3) { +#loading span:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } -.loading span:nth-child(4) { +#loading span:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } -.loading span:nth-child(5) { +#loading span:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } -.loading span:nth-child(6) { +#loading span:nth-child(6) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } -.loading span:nth-child(7) { +#loading span:nth-child(7) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } diff --git a/src/pace.js b/src/pace.js index cf7dc93..8c51387 100644 --- a/src/pace.js +++ b/src/pace.js @@ -38,6 +38,8 @@ }; }; + + // 默认配置 defaultOptions = { className: '', catchupTime: 100, @@ -71,6 +73,7 @@ return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date); }; + // 动画 requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;