laravel10 + bootstrap5 自适应站点[3] 是多余的，是临时看到一个赏析悦目的站点的一个冲动。还是回到正常的思路上来。我们这里先完成一个 loading 的功能。这里使用 nprogress。
开始吧
# 安装
pnpm add nprogress
# 配置 css (resources/sass/app.scss)，加入以下代码
@import "nprogress/nprogress.css";
/* Loading 颜色 */
#nprogress .bar {
background: $primary-color !important;
}
# 配置 js (resources/js/app.js)，加入一下代码
import NProgress from "nprogress";
// 进度条
NProgress.configure({ showSpinner: false });
NProgress.start();
window.onload = () => {
NProgress.done();
}
# 编译
pnpm run build
到此，配置和使用完毕。刷新页面，就可以在顶部看到 loading 的效果了。这是一个粗略简单的效果。其实，就想要这种简单多的就好。
提交代码
git add .
git commit -m '创建页面 loading nprogress'