在Angular中自定义CSS加载器：基于现有可用加载器的定制问询

Great to hear you already have a working CSS loader up and running in Angular! Let's break down practical ways to customize it to match your app's design and functionality needs:

Instead of hardcoding width/height in CSS, make it flexible using Angular's property binding so it fits perfectly in different parts of your app:

• Update your component to accept a size input:

// loader.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent {
  @Input() size: number = 120; // Default matches your original loader size
}

• Modify the template to bind dimensions dynamically:

<!-- loader.component.html -->
<div class="loader" [ngStyle]="{ width: size + 'px', height: size + 'px' }"></div>

• Adjust your CSS to remove hardcoded dimensions (borders will scale proportionally):

/* loader.component.css */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/* Keep your existing keyframes */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

• Use it in parent components with custom sizes:

<app-loader [size]="80"></app-loader> <!-- Smaller loader for inline use -->
<app-loader [size]="150"></app-loader> <!-- Larger loader for full-page loading -->

Make the loader adapt to your app's theme by adding color inputs:

• Add color inputs to your component:

// loader.component.ts
@Input() primaryColor: string = '#3498db'; // Default blue
@Input() secondaryColor: string = '#f3f3f3'; // Default light gray

• Use CSS variables in your styles to bind these dynamic colors:

/* loader.component.css */
.loader {
  border: 16px solid var(--secondary-color);
  border-radius: 50%;
  border-top: 16px solid var(--primary-color);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

• Set the CSS variables in your component's initialization:

// loader.component.ts
import { Component, Input, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
  @Input() size: number = 120;
  @Input() primaryColor: string = '#3498db';
  @Input() secondaryColor: string = '#f3f3f3';

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    const loaderElement = this.el.nativeElement.querySelector('.loader');
    loaderElement.style.setProperty('--primary-color', this.primaryColor);
    loaderElement.style.setProperty('--secondary-color', this.secondaryColor);
  }
}

• Now you can use themed loaders anywhere:

<app-loader [primaryColor]="'#e74c3c'" [secondaryColor]="'#ecf0f1'"></app-loader> <!-- Red themed -->
<app-loader [primaryColor]="'#2ecc71'" [secondaryColor]="'#f8f9fa'"></app-loader> <!-- Green themed -->

Tweak how fast the loader spins by adding an animation duration input:

• Add the duration input to your component:

// loader.component.ts
@Input() animationDuration: string = '2s'; // Default 2-second spin

• Update CSS to use a variable for the animation duration:

/* loader.component.css */
.loader {
  border: 16px solid var(--secondary-color);
  border-radius: 50%;
  border-top: 16px solid var(--primary-color);
  -webkit-animation: spin var(--animation-duration) linear infinite;
  animation: spin var(--animation-duration) linear infinite;
}

• Set the duration variable in ngOnInit:

// loader.component.ts
ngOnInit(): void {
  const loaderElement = this.el.nativeElement.querySelector('.loader');
  loaderElement.style.setProperty('--primary-color', this.primaryColor);
  loaderElement.style.setProperty('--secondary-color', this.secondaryColor);
  loaderElement.style.setProperty('--animation-duration', this.animationDuration);
}

• Use different spin speeds as needed:

<app-loader [animationDuration]="'1s'"></app-loader> <!-- Faster spin -->
<app-loader [animationDuration]="'3s'"></app-loader> <!-- Slower spin -->

Wrap your loader into a reusable component that you can toggle easily with an input (replacing your hardcoded *ngIf="somevalue"):

• Add a isLoading input to control visibility:

// loader.component.ts
@Input() isLoading: boolean = false;

• Update the template to use *ngIf with the input:

<!-- loader.component.html -->
<div *ngIf="isLoading" 
     class="loader" 
     [ngStyle]="{ width: size + 'px', height: size + 'px' }"></div>

• Control it from parent components based on your app's state:

<!-- Parent component template -->
<app-loader [isLoading]="isFetchingData" [size]="100"></app-loader>

In your parent component's TS file, just toggle isFetchingData to true when loading starts, and false when it completes:

isFetchingData = false;

fetchData() {
  this.isFetchingData = true;
  this.dataService.getContent().subscribe({
    next: () => this.isFetchingData = false,
    error: () => this.isFetchingData = false
  });
}

Extend the loader to show different visual states once loading completes:

• Add a state input to your component:

// loader.component.ts
type LoadingState = 'loading' | 'success' | 'error';
@Input() loadingState: LoadingState = 'loading';

• Update CSS to include state-specific styles:

/* loader.component.css */
.loader.success {
  border-top-color: #2ecc71;
  animation: none;
  transform: rotate(0deg);
  /* Optional: Add a checkmark icon with pseudo-elements */
}

.loader.error {
  border-top-color: #e74c3c;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

• Update the template to apply state classes:

<!-- loader.component.html -->
<div *ngIf="loadingState !== 'success' || loadingState !== 'error'" 
     class="loader" 
     [ngClass]="{ success: loadingState === 'success', error: loadingState === 'error' }"
     [ngStyle]="{ width: size + 'px', height: size + 'px' }"></div>

• Use it in parent components to reflect loading outcomes:

<app-loader [loadingState]="currentLoadingState"></app-loader>

In your parent TS:

currentLoadingState: LoadingState = 'loading';

fetchData() {
  this.currentLoadingState = 'loading';
  this.dataService.getContent().subscribe({
    next: () => this.currentLoadingState = 'success',
    error: () => this.currentLoadingState = 'error'
  });
}

内容的提问来源于stack exchange，提问作者Diego Venâncio