JSFiddle - React, Tailwind, and code Playground

HTML

<div id="half-donut">
    <div id="figlio"></div>
</div>

CSS

body {
  background-color: #000;
}


#half-donut {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border-radius: 200px 200px 0% 0%;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


#figlio {
    width: 140px;
    height: 75px;
    background: #000;
    border-radius: 140px 140px 0% 0%;
}


@keyframes first {
  0% {
    background-color: green;
  }
  33% {
    background-color: yellow; 
  }
  66% {
    background-color: orange; 
  }
  100% {
    background-color: red; 
  }
}


.first-start {
  animation: first 2s linear;
}

.first-pause {
  animation-play-state: paused;
}

JavaScript

//FIRST BAR
$('#half-donut').addClass('first-start');

setTimeout(function() {
  $('#half-donut').addClass('first-pause');
}, 1700);