html - 如何缩小“spinkit”微调器以使其与文本大小更好地融合？

我正在使用react-spinkit / spinkit创建一个three-bounce微调器，我想在一些文本旁边使用它来放置一个静态省略号。

这是我当前的Typescript反应代码：

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

它运作良好，但微调框看起来太大：



它在iPhone上显得格格不入。

如何将微调器缩小到大约一半大小？

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

我尝试用div将spinner元素设置为将宽度和高度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）。

关于html - 如何缩小“spinkit”微调器以使其与文本大小更好地融合？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43268016/