CSS circle progress bar is not animating

General
,
1

I am unable to get the circle bar to animate. I attempted adding transition: all 600ms ease; but that didn’t work. I am not sure if CSS animation supports conic-gradient.

jQuery(function ($) {
  $('.bar').addClass('animate');
});

.icon {
  width: 146px;
  height: 146px;
  padding: 36px;
  position: relative;
  flex-shrink: 0;
}
.icon .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.icon .bar::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(#00a451 0%, #e1e1e1 0%);
  z-index: 1;
  transition: all 600ms ease;
}
.icon .bar::after {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.icon .bar.animate::before {
  background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%);
}

<div class="icon">
  <div class="bar" style="--stat-bar:75%"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2

Fix: I have used the following https://codepen.io/t_afif/pen/XWaPXZO as an inspiration and updated my script accordingly and now it works as intended.

jQuery(function ($) {
  $('.module').addClass('animate');
});

@property --stat-bar{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.icon{
  width: 146px;
  height: 146px;
  padding: 36px;
  position: relative;
  flex-shrink: 0;
}

.icon .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.icon .bar:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background:
    radial-gradient(farthest-side, #00a451 98%, #0000) top/22px 22px no-repeat,
    conic-gradient(#00a451 calc(var(--stat-bar) * 1%), #0000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - 22px), #000 calc(100% - 22px));
  mask: radial-gradient(farthest-side, #0000 calc(99% - 22px), #000 calc(100% - 22px));
  background-size:
    0 0,
    auto;
}

.animate .icon .bar{
  animation:progress-bar 1s .5s both;
}
@keyframes progress-bar {
  from{--stat-bar:0}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<section class="module">
  <div class="icon">
      <div class="bar" style="--stat-bar:80;"></div>
  </div>
</section>