NextJS开发：ssr服务器端渲染页面，添加加载进度提示

nextjs中ssr服务器端渲染的页面加载速度慢的时候，需要显示一个如下图的加载进度提示，来优化用户体验。

nextjs框架中已经预留了加载动画的接口页面，我们只需要提那家加载动画tsx，处理页面逻辑就可以实现。

iShot_2023-11-20_12.16.15.jpg

page.tsx 同级目录创建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;
}