首页NProgress的使用效果

NProgress的使用效果

时间: 2023-06-26 15:05:43 浏览: 140

NProgress是一个轻量级的进度条库，用于展示页面加载、AJAX请求等的进度条效果。使用NProgress非常简单，只需要在HTML文件中引入相关JS和CSS文件，然后在需要展示进度条的地方调用NProgress.start()即可，例如： ```html <!DOCTYPE html> <html> <head> <title>NProgress Demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css"> <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script> </head> <body> <button onclick="loadData()">Load Data</button> <script> function loadData() { NProgress.start(); setTimeout(function() { NProgress.done(); }, 3000); } </script> </body> </html> ``` 上面的代码中，点击按钮后调用loadData()函数，该函数中首先调用NProgress.start()开始展示进度条，然后模拟了一个3秒钟的异步请求，请求完成后调用NProgress.done()结束展示进度条。 NProgress支持多种自定义配置，例如修改进度条颜色、展示速度等，具体可以查看其官方文档。

阅读全文