调整 mat-spinner

在 Angular 中，mat-spinner 是一个非常常用的 UI 组件，通常用于在加载数据时显示 loading 状态。这个组件的样式是可以调整的，下面我们将介绍如何调整 mat-spinner 的样式。

改变颜色

默认情况下，mat-spinner 的颜色是 Mat 主题中的主色（primary color）。如果想改变颜色，可以使用 color 属性。例如，要将颜色改为红色，可以这样写：

<mat-spinner color="warn"></mat-spinner>

其中，warn 是 Mat 主题中的警告色。

改变大小

默认情况下，mat-spinner 的大小是 48px。如果想改变大小，可以使用 diameter 属性。例如，要将大小改为 32px，可以这样写：

<mat-spinner diameter="32"></mat-spinner>

数值渐变样式

另外一个常见需求是将 mat-spinner 改成显示数值渐变的样式。可以通过 CSS 样式来实现。

首先，在你要用到的组件中引入下面这段 SCSS 样式：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mat-spinner {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;

  div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    margin: 2px;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;

    &:nth-child(1) {
      animation-delay: -0.45s;
    }
    &:nth-child(2) {
      animation-delay: -0.3s;
    }
    &:nth-child(3) {
      animation-delay: -0.15s;
    }
  }
}

然后，就可以在 mat-spinner 中使用这个样式了：

<mat-spinner class="gradient-spinner"></mat-spinner>

总结

通过调整 mat-spinner，我们可以实现各种不同的样式，使得 loading 状态更加炫酷。以上，就是调整 mat-spinner 的简单介绍。

注：本文所采用的相对时间插件为 smart-time-ago。