一名在碼圈摸爬滾打,幻想成為大佬的大學生——Liujian
使用簡單且不影響原來頁面布局,加載進度條是比較主流的幾種樣式,值得擁有收藏,
1. 使用說明
點擊下載資源:https://download.csdn.net/download/m0_53129012/13219456
匯入依賴的JS檔案 【開發環境】推薦使用pace.js 【生成環境】推薦使用壓縮過的pace.min.js

進入themes檔案夾選擇已經定義好自己喜歡的顏色匯入自己喜歡的加載進度條樣式(匯入其中一個CSS檔案即可)


或者進入templates檔案夾使用模板自定義進度條顏色以及相關樣式設定

使用示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>遇見流光 - 博客https://blog.csdn.net/m0_53129012</title>
<!-- 更換進度條樣式修改此處即可 -->
<link rel="stylesheet" href="../themes/pink/pace-theme-flash.css">
<script src="../pace.min.js"></script>
</head>
<body>
</body>
</html>
進入tests檔案夾,提供了一些示例demo

demo1

demo2

demo3

demo4

demo5

o( ̄▽ ̄)ブ 有不明白的地方留言哦,歡迎打擾~~~
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/229877.html
標籤:其他
上一篇:在原生開發中控制HTML5視頻
下一篇:走向大佬第一步,建構式真武術
