Jquery - CSS circle progress bar is not animating

AhmedAlSamarrai
August 26, 2024
30 views
0 votes
2 Answers

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 if css animation support 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%);
}

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

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

Answers

Chosen as BEST ANSWER

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>

(Edit)

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.

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – CSS circle progress bar is not animating

Answers