Анимация индикатора выполнения в виде пунктирной линии ⇐ CSS

[Anonymous]

Я создаю компонент индикатора выполнения/объема с помощью Angular/Tailwind, где процентные приращения представлены цветными кружками. Все серые кружки означают 0 %, все синие — 100 %, 10 из 20 — 50 % и т. д.
Я хочу анимировать это так, чтобы цветная часть перемещалась туда, где пользователь нажимает кнопку мыши. на панели.
Я экспериментировал с clip-path, пытаясь создать серию «окон», в которых круги представляют собой прозрачные секции, раскрывающие цвет позади них, но я могу не совсем понял.
Вот мой код для статической версии:

Код: Выделить всё

export class ProgressBarComponent implements OnInit {
@Input() min = 0;
@Input() max = 100;
@Input() value = 0;
@Input() step = 5;
@Input() dotSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
@Input() dotSpacing = 0; // Gap between dots in pixels

@Output() valueChange = new EventEmitter();

public dots = Array.from(
{ length: Math.floor(this.max / this.step) },
(_, i) => i * this.step + this.step,
);
public dotPixels = 0;

ngOnInit(): void {
switch (this.dotSize) {
case 'xs':
this.dotPixels = 6;
break;
case 'sm':
this.dotPixels = 8;
break;
case 'md':
this.dotPixels = 10;
break;
case 'lg':
this.dotPixels = 12;
break;
case 'xl':
this.dotPixels = 16;
break;
}
}

public onDotClick(value: number) {
this.valueChange.emit(value);
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/787 ... otted-line