JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="yin-yang">
  <span class="text-2">Izi</span>
  <div class="rect-2">
    <span class="text-1">Izi</span>
  </div>
</div>

SCSS

$size: 300px;
$cor-1: #f2f2f2;
$cor-2: rgb(0,89,169);
.yin-yang {
  background: $cor-1;
  width: $size;
  height: $size;
  position:relative;
  .rect-2 {
    width: 50%;
    overflow: hidden;
    background: $cor-2;
    height: 100%;
    position: absolute;
    transition: width 200ms linear;
  }
  .text-2, .text-1 {
    width: 300px;
    position:absolute;
    top: 90px;
    text-align: center;
    font-size: 6rem;
  }
  .text-2 {
    color: $cor-2;
  }
  .text-1 {
    color: $cor-1;
  }
  
}

JavaScript

setInterval(()=> {
	let rand = 30 + (Math.random() * 40);
	document.querySelector('.rect-2').style = `width: ${rand}%`;
	document.querySelector('.text-1').innerHTML = `${Math.floor(rand)}%`;
	document.querySelector('.text-2').innerHTML = `${Math.floor(rand)}%`;
}, 500);