启用翻译中的遮罩层

在执行翻译时，浏览器本地缓存没有，需要走API接口时，这个API接口会有网络延迟，比如有1、2秒延迟的话，然后等翻译API拿到结果后再显示到网页，对用户来说，他看到的就是先出现原语种一两秒，然后又变成了翻译后的文本。
本能力就是解决这个问题，在翻译的这段时间，会在原语种的元素上面显示一层加载中的动画效果，让用户知道这段文本正在进行处理中。 而不需要走翻译API接口的部分，则不会显示这个加载中的动画效果。
它并不会影响你本身网页的阅读观看，它的作用是给用户一个友好提示，免得让用户感觉是你网页有问题。

使用方式

简单使用

增加一行代码，用以标记启用此能力: 

  1. translate.progress.api.startUITip();

自定义样式

  1. translate.progress.style=`
  2. /* CSS部分 */
  3.     /* 灰色水平加载动画 */
  4.     .translate_api_in_progress {
  5.       position: relative;
  6.       overflow: hidden; /* 隐藏超出部分的动画 */
  7.     }
  9.     /* 蒙版层 */
  10.     .translate_api_in_progress::after {
  11.       content: '';
  12.       position: absolute;
  13.       top: 0;
  14.       left: 0;
  15.       width: 100%;
  16.       height: 100%;
  17.       background: rgba(255, 255, 255, 1); /* 半透明白色遮罩 */
  18.       z-index: 2;
  19.     }
  21.     /* 水平加载条动画 */
  22.     .translate_api_in_progress::before {
  23.       content: '';
  24.       position: absolute;
  25.       top: 50%;
  26.       left: 0;
  27.       width: 100%;
  28.       height:100%; /* 细线高度 */
  29.       background: linear-gradient(
  30.         90deg,
  31.         transparent 0%,
  32.         #e8e8e8 25%,  /* 浅灰色 */
  33.         #d0d0d0 50%,  /* 中灰色 */
  34.         #e8e8e8 75%,  /* 浅灰色 */
  35.         transparent 100%
  36.       );
  37.       background-size: 200% 100%;
  38.       animation: translate_api_in_progress_horizontal-loader 3.5s linear infinite;
  39.       z-index: 3;
  40.       transform: translateY(-50%);
  41.     }
  43.     @keyframes translate_api_in_progress_horizontal-loader {
  44.       0% {
  45.         background-position: 200% 0;
  46.       }
  47.       100% {
  48.         background-position: -200% 0;
  49.       }
  50.     }
  51. `;
  52. translate.progress.api.startUITip();

你可以更改其中的 translate.progress.style 的css样式，来自定义当文本翻译中时，文本的css显示效果

注意

  1. 它要放在 translate.execute(); 的前面
  2. 需要 translate.js v3.16 及更高版本才支持
  3. 使用大模型翻译的场景，此能力尤其明显。