当我点击AMP表单中的提交按钮时，如何显示加载器？

当点击AMP表单中的提交按钮时，可以通过以下步骤来显示加载器：

在提交按钮的点击事件中，添加显示加载器的代码。例如，可以在点击事件中添加一个CSS类名，用于显示加载器。
创建一个加载器元素，可以是一个动画图标或进度条。可以使用CSS样式来自定义加载器的外观和动画效果。
将加载器元素添加到表单页面的适当位置。可以将其插入到提交按钮的旁边或表单的顶部或底部，以提醒用户正在处理提交请求。
在表单提交完成后，隐藏加载器。可以通过移除加载器的CSS类名或使用JavaScript代码来实现。

对于AMP（加速移动页面）表单，你可以使用AMP的内置组件和功能来实现加载器的显示和隐藏。下面是一个简单的示例代码：

<form method="post" action-xhr="/submit-url" target="_top">
  <!-- 表单内容 -->
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <button type="submit" on="tap:my-form.submit, my-loader.show">提交</button>
</form>

<div id="my-loader" hidden>
  <!-- 加载器的内容和样式 -->
  <div class="loader"></div>
  <p>正在提交，请稍候...</p>
</div>

<style amp-custom>
#my-loader {
  display: none;
  text-align: center;
}

.loader {
  /* 加载器样式 */
}
</style>

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

在上面的示例中，当点击提交按钮时，通过on属性和tap事件来触发表单的提交和加载器的显示。加载器的内容和样式可以根据实际需求进行自定义。注意，这只是一个简单示例，实际使用时需要根据具体情况进行适当的调整和修改。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的计算能力和资源隔离，适用于各种应用场景。详细信息请参考：https://cloud.tencent.com/product/cvm
腾讯云弹性伸缩（AS）：根据需求自动调整计算资源，提高应用的可靠性和弹性。详细信息请参考：https://cloud.tencent.com/product/as
腾讯云内容分发网络（CDN）：加速内容传输，提供快速稳定的用户体验。详细信息请参考：https://cloud.tencent.com/product/cdn
腾讯云云数据库MySQL版（TencentDB for MySQL）：托管的关系型数据库服务，提供高可用、可扩展、安全的数据库解决方案。详细信息请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：提供多样化的人工智能服务和工具，包括语音识别、图像识别、自然语言处理等。详细信息请参考：https://cloud.tencent.com/product/ai