如何在Telegram小程序加载时添加占位加载动画（Spinner）

核心思路 #

Telegram小程序加载时，React应用初始化需要一定时间，所以要在React挂载前的静态HTML中添加预加载UI，这个UI会在React完成渲染后被自动替换。

具体实现步骤 #

1. 修改HTML入口文件（如public/index.html） #

在React挂载的根容器（一般是<div id="root"></div>）内部直接添加预加载内容，它会在页面加载时立刻显示，无需等待React初始化：

<div id="root">
  <!-- 自定义预加载占位UI，对齐Durger King/Wallet机器人的样式 -->
  <div class="telegram-preloader">
    <div class="preloader-logo">
      <!-- 放置品牌logo或加载动画，比如SVG加载 spinner -->
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- 自定义加载动画的SVG代码 -->
      </svg>
    </div>
    <p class="preloader-text">加载中...</p>
  </div>
</div>

2. 添加预加载样式 #

在HTML的<head>标签内嵌入样式，确保预加载UI占满Telegram小程序视口，和你的品牌风格匹配：

<style>
.telegram-preloader {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff; /* 匹配你的小程序背景色 */
}

.preloader-logo {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.preloader-text {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}
</style>

3. React挂载后自动清除预加载UI #

当React完成初始化并挂载到#root容器后，内部的预加载内容会被React的渲染结果自动覆盖，无需额外编写清除代码。

关键注意点 #

• 预加载UI必须是纯静态HTML/CSS，不能依赖React或其他JS库，才能保证页面加载瞬间显示
• 样式要和小程序整体风格统一，比如背景色、logo样式，完全对齐目标机器人的占位效果
• 避免在预加载UI中引入大体积资源（如高清图片），否则会拖慢加载速度，失去占位的意义

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