如何在JHipster项目中替换默认pacman加载器并添加自定义加载器

• 步骤1：定位默认加载器代码
  打开项目路径下的src/main/webapp/index.html文件，找到包裹在<div class="loader-container">标签内的全部pacman相关代码，这就是JHipster默认加载器的所有内容。
• 步骤2：替换为自定义加载器
  直接删除原有pacman相关的HTML和样式，替换为你自己的加载器资源，支持自定义CSS加载器、GIF/PNG动图、SVG动图等类型。以下是一个自定义旋转加载器的示例，可以直接替换使用：

<!-- 替换原有加载器代码块 -->
<div class="loader-container">
  <div class="custom-spinner"></div>
  <p>加载中，请稍候</p>
</div>
<style>
/* 原有loader-container的定位层级可以保留，也可以按需修改 */
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 9999;
}
.custom-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader-container p {
  margin-top: 16px;
  color: #666666;
  font-size: 14px;
}
</style>

• 步骤3：（按需调整）加载器隐藏逻辑
  JHipster默认会在前端框架根组件挂载完成后自动删除.loader-container元素完成加载器隐藏，正常场景无需额外修改。如果需要自定义隐藏时机，可以对应到各自框架的入口组件修改：
  • Angular 项目：修改src/main/webapp/app/app.component.ts中移除加载器的代码触发时机
  • React 项目：修改src/main/webapp/app/app.tsx组件挂载生命周期中的移除逻辑
  • Vue 项目：修改src/main/webapp/app/App.vue的onMounted钩子中的移除逻辑
• 步骤4：验证效果
  本地启动项目或者打包部署后，刷新页面即可看到替换后的自定义加载器，无需修改其他JHipster配置项。

内容的提问来源于stack exchange，提问作者Shiva Rena