CSS circle progress bar is not animating

Question

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>

Answer 1

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>

Answer 2

• Here I used your initial CSS and HTML as a starting point, trimmed CSS and HTML to the minimal necessary. All you need to add then is a CSS @property of <percentage> (or <number>) with an initial value of 0% that animates to any end-value stored inside an element's style="--data-bar:N%;" attribute.
• PS: you don't need an entire jQuery library in order to assign classes to elements, and also you don't need the wrapping .icon element parent

document.querySelectorAll(".bar").forEach(el => el.classList.add("animate"));

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

.bar {
  display: inline-flex;
  position: relative;
  height: 150px;
  aspect-ratio: 1;
  inset: 0;
  mask: radial-gradient(#0000 32%, #000 calc(32% + 1px)); /* Hole */ 
  border-radius: 50%;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%);
  }
  
  &.animate::before {
    animation: statBar 1s forwards;
  }
}

@keyframes statBar {
  from {
    --stat-bar: 0%;
  }
}

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

Answer 3

With css animation not possible in this case, please see here for a reference.

I have implemented some extra code with the JS. Please review the attributes added animate-end="75" animate-speed="10".

$(function () {
  $(".bar").addClass("animate");
  var animationEnd = parseInt($(".bar").attr("animate-end"), 10);
  var speed = parseInt($(".bar").attr("animate-speed"), 10);
  var initial = 0;

  if (!isNaN(animationEnd) && animationEnd >= initial) {
    var intervalId = setInterval(() => {
      $(".bar").attr("style", `--stat-bar: ${initial}%`);
      initial++;

      if (initial > animationEnd) {
        clearInterval(intervalId);
      }
    }, speed);
  }
});

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

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

.icon .bar::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background: conic-gradient(#00a451 0%, #e1e1e1 0%);
    z-index: 1;
    transition: none;
}

.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%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="icon">
    <div class="bar" animate-end="75" animate-speed="10"></div>
</div>

Please let me know if this could help you.