CSS Angular Material 自定义颜色的 mat-spinner

在本文中，我们将介绍如何使用 CSS 来自定义 Angular Material 中的 mat-spinner 组件的颜色。

阅读更多：CSS 教程

1. 引入 Angular Material

首先，我们需要在项目中引入 Angular Material。可以通过 npm 安装 Angular Material 并在项目中引入。

npm install @angular/material

在项目的主模块中引入 Angular Material 的样式文件。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

// 引入 Angular Material 的样式
import { MatSpinnerModule } from '@angular/material/spinner';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // 导入 MatSpinnerModule
    MatSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 自定义颜色

Mat-spinner 组件是 Angular Material 中提供的一个加载指示器。默认情况下，它使用主题中的颜色作为自身的颜色。

如果我们想要自定义 mat-spinner 组件的颜色，可以通过 CSS 来实现。

首先，为 mat-spinner 组件创建一个类。可以将类名命名为custom-spinner。

.custom-spinner .mat-progress-spinner-primary {
  color: #ff0000; /* 这里可以替换成你喜欢的颜色 */
}

在上面的示例中，我们使用了custom-spinner类，并将进度指示器的颜色设置为红色。你可以根据自己的需求替换颜色值。

3. 在组件中使用自定义颜色的 mat-spinner

在组件的 HTML 文件中，使用 mat-spinner 组件，并为其添加我们之前定义的custom-spinner类。

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

这样，我们就成功地将 mat-spinner 组件的颜色自定义为我们指定的颜色了。

4. 示例

下面是一个完整的示例，展示了如何在 Angular 中使用 CSS 来自定义颜色的 mat-spinner。

app.component.html:

<div class="spinner-container">
  <mat-spinner class="custom-spinner"></mat-spinner>
</div>

app.component.css:

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.custom-spinner .mat-progress-spinner-primary {
  color: #ff0000;
}

在上面的示例中，我们首先创建了一个容器，使 mat-spinner 居中显示。然后，在 mat-spinner 上应用了我们之前定义的custom-spinner类，并将其颜色设置为红色。