JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="20px">
                    <g transform="translate(0,10)">
                        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
                        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
                    </g>
                </svg>

CSS

@keyframes sweep {
    from {
        cx: 0%;
    }

    to {
        cx: 100%;
    }
}

circle {
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-name: sweep;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}