JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<h1 class='v'></h1>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>

CSS

section {
   display: none;
}

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

JavaScript

const ver = document.querySelector('.v');
const loading = document.querySelector('section');
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);
}


setInterval(() => {
 loading.style.display = 'flex';
 ver.textContent = '';
 fetch('https://softserve-bears.herokuapp.com/extension?id=jjfblogammkiefalfpafidabbnamoknm')
 .then(res => res.json())
 .then(data => {
			setTimeout(() => {
      loading.style.display = 'none';
      ver.textContent = data.version}, 2000);
 });
}, 5000);