【HTML+CSS+JS】精美页面加载进度条

一名在码圈摸爬滚打,幻想成为大佬的大学生——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( ̄▽ ̄)ブ 有不明白的地方留言哦,欢迎打扰~~~

猜你喜欢

转载自blog.csdn.net/m0_53129012/article/details/110505144