JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<div class="master-div">
  <div class="circular" id="circular">
    
  </div>
  <div class="main-img" style="background-image:url()">
  <img src="//cdn.shopify.com/s/files/1/1819/4549/files/main-image.png?v=1629884893"/>
   </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

html,
body {
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  background: #dde6f0;
}

.circular {
  height: 162px;
  width: 100px;
  border-radius: 50% 50% 50% / 30%;
  border: 5px solid grey;
  position: relative;
  -webkit-transition: border 1s ease-out;

  &.t25 {
    border-color: pink grey grey grey;
  }


  &.t50 {
    border-color: pink pink grey grey;
  }

  &.t75 {
    border-color: pink pink pink grey;
  }

  &.t100 {
    border-color: pink pink pink pink;
  }
}
.master-div{
  position:relative;
}

.taskdiv{

}

.main-img{
  position:absolute;
  width:100px;
  height:160px;
  background-size:cober;
  top:-1px;
  left:-1px;
}

.main-img img{
  max-width:102%;
  margin: 5px;
}

JavaScript

var currentProgress = "";

setInterval(function(){
  let circular = document.getElementById('circular');
  let pastProgress = currentProgress;
  if(currentProgress == ""){
    currentProgress = "t25";
  }
  else if(currentProgress == "t25"){
    currentProgress = "t50";
  }
  else if(currentProgress == "t50"){
    currentProgress = "t75";
  }
  else if(currentProgress == "t75"){
    currentProgress = "t100";
  }
  else if(currentProgress == "t100"){
    currentProgress = "";
  }
  circular.classList.add(currentProgress);
  circular.classList.remove(pastProgress);
}, 1000);