How to animate circle progress value in CSS or Jquery?-CodePudding

I have a circle progress chart with number in the middle make up from css style like in this picture. Here is an sample code:

.chart {
  --size: 236px;
  --value: 30%;
  --bord: 20px;
  --color: #4187C9;
  width: var(--size);
  height: var(--size);
  border: var(--bord) solid transparent;
  border-radius: 50%;
  background: linear-gradient(white, white) padding-box, conic-gradient(var(--color) var(--value), lightgrey var(--value)) border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  box-sizing: border-box;
  /* flex */
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-percentage p {
  margin: 0;
  font-size: 40px;
  color: #00C1D2;
  font-weight: 600;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="chart"  style="--value: 30%;">
  <div >
    <i ></i>
    <p>30%</p>
  </div>
</div>

How can I animate progress value and number for specific duration of time ? Thanks

CodePudding user response：

You can use JavaScript to update your CSS --value property on a timeout and it can use the same value to update the text in the center of the circle.

Here's a simple example which updates every 5th of a second:

function tick() {
  setTimeout(function() {
    chart.style.setProperty('--value', pc   '%');
    chart.querySelector('p').innerHTML = pc   '%';
    pc  ;
    if (pc <= 100) tick();
  }, 200);
}
let pc = 0; // percent completed
let chart = document.querySelector('#chart');
tick();

.chart {
  --size: 236px;
  --value: 0%;
  --bord: 20px;
  --color: #4187C9;
  width: var(--size);
  height: var(--size);
  border: var(--bord) solid transparent;
  border-radius: 50%;
  background: linear-gradient(white, white) padding-box, conic-gradient(var(--color) var(--value), lightgrey var(--value)) border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  box-sizing: border-box;
  /* flex */
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-percentage p {
  margin: 0;
  font-size: 40px;
  color: #00C1D2;
  font-weight: 600;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="chart" >
  <div >
    <i ></i>
    <p>30%</p>
  </div>
</div>

Obviously you'll want to change the timings and the exact positioning of the icon and text to suit your particular requirements.