Round progress bar

by reeson46

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="wrapper">
  <div class="subtask-circular-progress sub-progress-bar_transition">
    <div class="inner"></div>
    <div class="number">100%</div>
    <div class="circle">
      <div class="bar_transition left">
        <div class="sub-progress"></div>
      </div>
      <div class="bar_transition right">
        <div class="sub-progress"></div>
      </div>
    </div>
  </div>
</div>
<div class="d-flex buttons">
  <button type="button" class="btn btn-success add">+</button>
  <button type="button" class="btn btn-success remove ms-4">-</button>
  <button type="button" class="btn btn-success reload ms-4" data-completed="" data-total="" data-modulo="" data-toggle="">reload</button>
</div>

CSS

body{
    background-color: #333;
}

.subtask-circular-progress {
    position: absolute;
    left: 50%;
    top: 40%;
    height: 100px;
    width: 100px;
    background-color: red;
}

.subtask-circular-progress .inner {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 100%;
    background: #454545;
}

.subtask-circular-progress .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 15px;
    font-weight: 500;
    color: white;
}

.subtask-circular-progress .bar_transition {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px, 100px, 100px, 50px);
}

.circle .bar_transition .sub-progress {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px, 50px, 100px, 0px);
    background: #4158d0;
    transition: all 0.5s ease-in-out;
}

.circle .left .sub-progress {
    transform: rotate(0deg);
}


.circle .right {
    transform: rotate(180deg);
    z-index: 3;

}

.circle .right .sub-progress {
    transform: rotate(0deg);
}

.buttons{
    position: absolute;
    left: 50%;
    top: 60%;
}

JavaScript

function updateSubtaskProgressBar(subs_completed, total_subs, progress_bar_transition, toggle, mod, reload_btn) {
  var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
  var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");

  progress = subs_completed / total_subs * 360;
  transition = 500;
  delay = transition / 2;
  rot_reminder = 0;

  if (progress < 180) {
    
    rot_right = 0;

    right_side.css({
      'transform': 'rotate(' + rot_right + 'deg)'
    });

    rot_left = progress

    rot_reminder = 180 - rot_left
  
    if (rot_reminder != 0 && mod != 0 && toggle == 0) {

      progress_bar_transition.css({
        'transition': 'all ' + delay / 1000 + 's ease-in'
      });

      setTimeout(function () {
        progress_bar_transition.css({
          'transition': 'all ' + delay / 1000 + 's ease-out'
        });
        left_side.css({

          'transform': 'rotate(' + rot_left + 'deg)'
        });
      }, delay);

      toggle = 1 - toggle
      reload_btn.data('toggle', toggle)

    } else {
      progress_bar_transition.css({
        'transition': 'all ' + transition / 1000 + 's ease-in-out'
      });
      left_side.css({
        'transform': 'rotate(' + rot_left + 'deg)'
      });

    }

  } else {

    rot_left = 180;

    left_side.css({
      'transform': 'rotate(' + rot_left + 'deg)'
    });

    rot_right = progress - 180;

    rot_reminder = rot_right

    if (rot_reminder != 0 && mod != 0 && toggle == 1) {
      
      progress_bar_transition.css({
        'transition': 'all ' + delay / 1000 + 's ease-in'
      });

      setTimeout(function () {
        progress_bar_transition.css({
          'transition': 'all ' + delay / 1000 + 's ease-out'
        });
        right_side.css({

          'transform': 'rotate(' + rot_right + 'deg)'
        });
      }, delay);

      toggle = 1 - toggle
      reload_btn.data('toggle', toggle)

    } else {
      progress_bar_transition.css({
      ...