import { Component, computed, input } from '@angular/core';
@Component({
selector: 'app-dot-matrix-loader',
standalone: true,
template: `
<div class="loader" [style.--size.px]="size()" [style.--gap.px]="gap()">
@for (dot of dots(); track $index) {
<span
class="dot"
[style.animation-delay.ms]="dot.delay"
[style.animation-duration.ms]="dot.duration">
</span>
}
</div>
`,
styles: [`
.loader {
display: grid;
grid-template-columns: repeat(var(--cols, 5), var(--size));
gap: var(--gap);
width: fit-content;
}
.dot {
width: var(--size);
height: var(--size);
border-radius: 50%;
background: currentColor;
opacity: 0.12;
animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.12; }
50% { opacity: 1; }
}
`],
})
export class DotMatrixLoaderComponent {
grid = input(5); // 5x5
size = input(12); // nuqta diametri
gap = input(8); // nuqtalar orasi
dots = computed(() => {
const total = this.grid() * this.grid();
return Array.from({ length: total }, () => ({
delay: -(Math.random() * 2000), // manfiy delay — darhol turli fazada boshlanadi
duration: 1200 + Math.random() * 1400, // har bir nuqta o'z tezligida
}));
});
}