@delvicons/icons/dist/angular/components/LoadingSpinner.ts

DelvIcons - Comprehensive icon library with static and animated SVG icons for all frameworks

import { Component, Input } from '@angular/core';

@Component({
  selector: 'delv-loading-spinner',
  template: `
    <svg
      [attr.width]="size"
      [attr.height]="size"
      viewBox="0 0 24 24"
      fill="none"
      [class]="iconClasses"
    >
      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="31.416" stroke-dashoffset="31.416">
    <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
  </circle>
    </svg>
  `,
  standalone: true
})
export class LoadingSpinnerComponent {
  @Input() size: number | string = 24;
  @Input() color: string = 'currentColor';
  @Input() className: string = '';
  @Input() animated: boolean = true;

  get iconClasses(): string {
    return [
      'delv-icon',
      'delv-icon-loading-spinner',
      this.animated ? 'delv-animated' : '',
      this.className
    ].filter(Boolean).join(' ');
  }
}