nextjs中ssr服務(wù)器端渲染的頁面加載速度慢的時候，需要顯示一個如下圖的加載進(jìn)度提示抛猖，來優(yōu)化用戶體驗格侯。
nextjs框架中已經(jīng)預(yù)留了加載動畫的接口頁面，我們只需要提那家加載動畫tsx财著，處理頁面邏輯就可以實現(xiàn)养交。
iShot_2023-11-20_12.16.15.jpg
page.tsx 同級目錄創(chuàng)建loading.tsx
注意：className中的使用的是Tailwind CSS
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return (
<div className=" fixed top-0 left-0 w-full z-50 h-0.5">
<div className="lload h-full bg-primary"></div>
</div>
)
}
globals.css中添加
/* 加載動畫 */
@keyframes loadingkeyframes{
0% {width:0%;}
100% {width:96%;}
}
.lload {
animation-name: loadingkeyframes;
animation-duration: 10s;
animation-delay: 0s;
animation-iteration-count: infinite;
}
