首屏加载页模板：若依版

一、效果预览

二、效果实现

在 Vue3 项目中，启动时通常会有一个容器（如 #app），这个容器最初会包含启动动画（如加载器），当 Vue 组件加载完成后，容器中的内容会被 Vue 的单页面应用内容替换。通过这种方式，可以在应用加载时展示一个启动动画，提升用户体验。

2.1、HTML 结构

<div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
  <div class="load_title">正在加载系统资源，请耐心等待</div>
</div>

2.2、CSS 样式

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  animation: spin 2s linear infinite;
  z-index: 1001;
}

#loader:before, #loader:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
}

#loader:before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  animation: spin 3s linear infinite;
}

#loader:after {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  animation: spin 1.5s linear infinite;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #7171c6;
  z-index: 1000;
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

#loader-wrapper .load_title {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  color: #fff;
  font-size: 19px;
  width: 100%;
  text-align: center;
  z-index: 9999999999999;
  position: absolute;
  top: 60%;
  opacity: 1;
  line-height: 30px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

2.3、解释一下

• #loader-wrapper 设为固定定位，覆盖整个页面，用于显示加载效果
• #loader 是一个圆形的旋转加载器，采用了 @keyframes 动画实现旋转效果
• 两个 loader-section 元素负责呈现渐隐动画，提供背景左右分屏的视觉效果
• 当页面加载完成后，.loaded 类会触发动画，隐藏加载器（已移除）
• 当 Vue 完成 app.mount('#app') 挂载后，此效果会被自动移除