James,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
}
.map-point {
height: 20px;
width: 20px;
background-color: #EEE8AA;
border-radius: 50%;
transition: 1s;
}
.map-point.red{
background-color: #FF0000;
}
</style>
<script>
addEventListener("DOMContentLoaded", function()
{
let divs = document.querySelectorAll(".map-point"),
len = divs.length,
index = len - 1;
limit = 4;
const loop = () => {
divs[index].classList.remove("red");
index = ++index % len;
for (let i = 0; i < limit; i++) {
let k = (index + i) % len;
divs[k].classList.add("red");
}
window.setTimeout(loop, 600)
};
loop()
}
);
</script>
</head>
<body>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div></body>
</html>