如何修改Telegram WebApp的加载动画图标？

要替换默认的机器人加载图标，你需要自定义WebApp的加载界面，覆盖Telegram的默认加载动画，具体步骤如下：

• 步骤1：创建自定义加载容器
  在HTML的最顶部添加一个全屏的加载容器，里面放置你的自定义动画图标（比如品牌专属图标、动态GIF），样式设置为覆盖整个视口，背景色可与WebApp主题匹配：

  <div id="custom-loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; display: flex; justify-content: center; align-items: center; z-index: 9999;">
    <img src="your-loading-animation.gif" style="width: 60px; height: 60px;" alt="加载中">
  </div>
  

  将your-loading-animation.gif替换为你自己的动画资源（支持GIF、SVG动画或纯CSS实现的动画）。

• 步骤2：确保自定义容器优先渲染
  把加载容器的代码放在<body>标签最开头，或者<head>内的样式之后，保证它在Telegram默认加载图标之前显示，直接覆盖默认界面。

• 步骤3：加载完成后隐藏自定义容器
  当WebApp资源加载完毕或Telegram WebApp SDK初始化完成后，隐藏加载容器：

  // 监听页面全量加载完成事件
  window.addEventListener('load', () => {
    document.getElementById('custom-loader').style.display = 'none';
  });
  
  // 或结合Telegram SDK初始化事件
  Telegram.WebApp.ready();
  setTimeout(() => {
    document.getElementById('custom-loader').style.display = 'none';
  }, 200);
  

• 额外优化：添加过渡效果
  给加载容器加上CSS过渡，让隐藏过程更平滑：

  #custom-loader {
    transition: opacity 0.3s ease-out;
  }
  

  隐藏时先设置opacity: 0，延迟后再设置display: none，避免生硬跳转。

这样就能完全替换默认的机器人加载图标，实现类似Durger King的自定义加载动画效果。

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