Angular Material中的内联进度旋转器。

Question

是否可以将Angular Material进度条与文本行内显示，并且大小大致等于字符大小？

我想要这样的效果：

<span>please wait <mat-spinner></mat-spinner></span>

旋转器是否能够与“请稍候”文本在同一行内显示？

这种情况是否可行？我查看了文档和提供的示例，但都没有找到解决方法。同时，在 StackOverflow 上进行的 Google+ 搜索也没有发现任何信息。

- Stewart_R

Answer 1

您可以在包装元素上使用 display: flex。要设置其大小，您可以使用 diameter 输入：

<div class="spinner-wrapper">
  <span>please wait</span>
  <mat-spinner [diameter]="12"></mat-spinner>
</div>

.spinner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

点击此处查看一个可工作的示例。

- Poul Kruijt

---

谢谢 - 这将使其与文本对齐，但不会将大小更改为与字符大致相同的高度。 - Stewart_R

@Stewart_R 你可以使用 diameter 输入。我已经更新了我的答案。 - Poul Kruijt

Answer 2

您也可以使用display:inline。您只需在或

标签之间声明mat-spinner即可。

.spinner{
  display:inline;
}

<div class="spinner">
  <p>please wait <mat-spinner [diameter]="12"> </mat-spinner> </p>
</div>

- Anil Xnm Drz