animated SVG Bar with dots for displaying a current flow

Question

I want to signal the current flow between two images. I would like to have a line with dots running along it. The dots should run evenly and infinitely from left to right and not jump back (or around). It should look like this: the dots appear evenly from the left and disappear from the right.
I like to change the speed, color and direction later via JS

This is my try with a bar, not a line as actually desired:

<svg width="200" height="20" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="white" />
                <rect id="progressBar" x="0" y="0" width="100%" height="100%" fill="none" stroke="yellow"
                    stroke-width="1" />

                <!-- (rot) -->
                <circle id="redCircle" cy="10" class="movingCircle" r="5" fill="red" />

                <!-- (blau) -->
                <circle id="blueCircle" cy="10" class="movingCircle" r="5" fill="blue" />

                <!-- (rot) -->
                <circle id="greenCircle" cy="10" class="movingCircle" r="5" fill="green" />



                <script>
                    const progressBar = document.getElementById('progressBar');
                    const redCircle = document.getElementById('redCircle');
                    const blueCircle = document.getElementById('blueCircle');
                    const greenCircle = document.getElementById('greenCircle');

                    const segmentWidth = 40;
                    const animationDuration = 2000; // in milliseconds


                    function moveCircles() {
                        const maxX = progressBar.getBBox().width - segmentWidth;

                        // Animation für den roten Kreis
                        redCircle.setAttribute('cx', 0);
                        redCircle.animate([
                            { cx: 0 },
                            { cx: maxX }
                        ], {
                            duration: animationDuration,
                            iterations: Infinity
                        });


                        blueCircle.setAttribute('cx', -segmentWidth); 
                        blueCircle.animate([
                            { cx: -segmentWidth },
                            { cx: maxX - segmentWidth }
                        ], {
                            duration: animationDuration,
                            iterations: Infinity
                        });



                        let greenseg = segmentWidth * 2;
                        greenCircle.setAttribute('cx', -greenseg);
                        greenCircle.animate([
                            { cx: -greenseg },
                            { cx: maxX - greenseg }
                        ], {
                            duration: animationDuration,
                            iterations: Infinity
                        });


                    }


                    moveCircles();
                </script>
            </svg>