Html 我怎样才能缩小“a”的比例；spinkit"；微调器可以更好地与我的文本大小融合？

我正在使用/创建一个

three bounce

微调器，我想在某个文本旁边使用该微调器来代替静态省略号

以下是我当前的Typescript代码：

<div style={ {display:"flex", flexDirection:"row"} }>
  <div>Loading server details</div>&nbsp;&nbsp;
  <Spinner spinnerName='three-bounce' />
</div>;

正在加载服务器详细信息
;

工作正常，但微调器看起来太大：

它在iPhone上看起来特别不合适

如何将微调器缩小到该尺寸的一半

（但以“相对”的方式，我不想指定像素大小。）

我尝试使用div将宽度和高度css样式设置为50%来包围微调器元素：

  <div style={ {width:"50%", height:"50%"} }>
    <Spinner spinnerName='three-bounce'/>
  </div> 

---

但这似乎没有起任何作用。

在查看了

react spinkit

的css源代码后，我最终将其添加到了我的全局css文件中：

.sk-three-bounce > div {
    width: 9px;
    height: 9px;
}

它不是以“相对”的方式进行的，但spinkit也不是（原始版本只是硬编码为

18px

）