Example

by Yuriy Petrichenko

HTML

<h1>Deal Finder Progress Simple Example</h1>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>

CSS

section {
   margin-top: 50px;
   display: flex;
}

div {
  width: 20px;
  height: 20px;
  margin: 8px;
  background: purple;
  border-radius: 50%;
  opacity: 0.3;
  transition: all 0.5s;
}

JavaScript

const dots = Array.from(document.querySelectorAll('div'));
let current = 0;
let time = 200;
setInterval(() => {
		setupAnimation();
}, time)

function setupAnimation() {
  current = current > 2 ? 0 : current;
  let last = current;
	dots[current].style.opacity = '1';
  current ++;
  setTimeout(() => dots[last] .style.opacity = '0.5', time);
}