如何为DataTable加载状态添加可旋转的齿轮emoji图标

我有一段初始化DataTable的代码，因表格数据量较大，数据无法即时显示。此前代码使用FontAwesome展示旋转齿轮，但我不想再使用FontAwesome，希望换成emoji。请问如何为以下代码添加可旋转的齿轮emoji？

原代码：

//⚙️
var table = $('#lTable').DataTable({
//other setup stuff
"language": {
                "processing": "Table is loading...",                
            }
      }
});

之前使用FontAwesome的代码行：

"processing": "<i class='fa fa-cog fa-spin fa-3x fa-fw'></i><span class='sr-only'>Loading...</span>", 

希望最终效果为一个旋转的齿轮图标搭配加载提示文字（类似静态齿轮加加载文字的样式，但齿轮需旋转）

因为emoji本身没有自带的旋转效果，我们需要通过CSS添加动画来实现，具体操作如下：

1. 添加CSS旋转动画样式
   在页面的<style>标签中加入以下代码，创建持续旋转的动画：

/* 定义旋转动画规则 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 给齿轮emoji应用旋转动画 */
.spinning-gear {
  display: inline-block;
  animation: spin 1s linear infinite;
  font-size: 24px; /* 可根据页面需求调整图标大小 */
  margin-right: 8px; /* 控制图标与文字的间距 */
}

/* 屏幕阅读器专用文本（隐藏但可被阅读器识别） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

2. 修改DataTable的processing配置
   将原language中的processing内容替换为包含齿轮emoji和旋转类的HTML代码：

var table = $('#lTable').DataTable({
  // 其他配置项
  "language": {
    "processing": "<span class='spinning-gear'>⚙️</span> Table is loading...<span class='sr-only'>Table is loading...</span>"
  }
});

3. 效果说明

• 齿轮emoji会以1秒一圈的速度持续旋转，和之前FontAwesome的旋转效果一致
• .sr-only类用于确保屏幕阅读器能读取到加载提示，同时不会在页面中显示冗余文字
• 可通过调整font-size和margin-right参数，适配你的页面样式

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