Круглый индикатор выполнения - CSS/JS

ProgramBox

Круглый индикатор выполнения — CSS/JS

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #progress-bar

Вопрос:

У меня есть этот круглый индикатор выполнения, который показывает ход выполнения выполненных задач. При изменении хода выполнения индикатор увеличивается/уменьшается в течение 0,5 с. Сама панель состоит из 2 половинок, поэтому в моем JS мне пришлось добавить некоторые дополнительные функции для задержки и изменения времени перехода, если, например, у вас будет неравномерное количество общих задач.

Теперь все это работает просто отлично, пока я «не восстановлю» индикатор выполнения (нажав кнопку «перезагрузить»), просто очистив оболочку панели и добавив все файлы и необходимые данные для повторного отображения панели с ее текущим прогрессом. На данный момент, всякий раз, когда индикатор выполнения достигает середины, по какой-то причине переход не такой плавный, как до «перезагрузки», но если вы снова обновите страницу, переход (в середине) будет в порядке. Я понятия не имею, почему это происходит…

Вот JSFiddle

ОБНОВЛЕНИЕ В разделе «при перезагрузке» в JS я забыл повторно инициализировать «bar_transition = $(‘.circle .bar_transition .sub-прогресс’)»

 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 amp;amp; mod != 0 amp;amp; 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 amp;amp; mod != 0 amp;amp; 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({
        'transition': 'all '   transition / 1000   's ease-in-out'
      });
      right_side.css({
        'transform': 'rotate('   rot_right   'deg)'
      });
    }
  }
}

function setSubtaskProgressBar(subs_completed, total_subs, bar_transition) {

  modulo = 0;
  current_progress = 0;
  
  var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
  var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");

  modulo = total_subs%2
  current_progress = subs_completed / total_subs * 360;

  var reload = $('.reload')
  reload.data('completed', subs_completed)
  reload.data('total', total_subs)
  reload.data('modulo', modulo)


  if (current_progress < 180) {

    rot_left = current_progress
    rot_right = 0

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

    reload.data('toggle', 1)

  } else {

    rot_left = 180
    rot_right = current_progress - 180

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

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

    reload.data('toggle', 0)

  }

  bar_transition.css({
    'transition': 'none'
  });
}


$(document).ready(function () {

  subs_completed = 3;
  total_subs = 5;

  bar_transition = $('.circle .bar_transition .sub-progress')
  
  number = $('.number')
  number.html(subs_completed   '/'   total_subs)

  setSubtaskProgressBar(subs_completed, total_subs, bar_transition)


  $(document).on('click', '.add', function () {
    subs_completed  = 1
    $('.number').html(subs_completed   '/'   total_subs)

    reload = $('.reload')
    reload.data('completed', subs_completed)
    modulo = reload.data('modulo')
    toggle = reload.data('toggle')
    total = reload.data('total')

    updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
  })

  $(document).on('click', '.remove', function () {
    subs_completed -= 1;
    $('.number').html(subs_completed   '/'   total_subs)

    reload = $('.reload')
    reload.data('completed', subs_completed)
    modulo = reload.data('modulo')
    toggle = reload.data('toggle')
    total = reload.data('total')

    updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
  })


  $(document).on('click', '.reload', function () {

    num = $(this).data('completed')   '/'   $(this).data('total')

    data = '<div class="subtask-circular-progress sub-progress-bar_transition" data-completed="' $(this).data('completed') '" data-total="' $(this).data('total') '" data-modulo="' $(this).data('modulo') '" data-toggle="' $(this).data('toggle') '"><div class="inner"></div><div class="number">' num '</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>'

    wrapper = $('.wrapper').empty();
    wrapper.append(data)


    setSubtaskProgressBar(subs_completed, total_subs, bar_transition) 

    console.log('reload')

  })

});

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

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Ответ №1:

Проблему было сложно найти, но вы ссылаетесь на bar_transition глобальную переменную, после чего относительное содержимое DOM удаляется.

После замены DOM содержимое bar_transition больше не отражает DOM, теряется.

Вам нужно вручную обновить содержимое переменной-это обратный вызов перезагрузки:

 bar_transition = $('.circle .bar_transition .sub-progress');

 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 amp;amp; mod != 0 amp;amp; 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 amp;amp; mod != 0 amp;amp; 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({
        'transition': 'all '   transition / 1000   's ease-in-out'
      });
      right_side.css({
        'transform': 'rotate('   rot_right   'deg)'
      });
    }
  }
}

function setSubtaskProgressBar(subs_completed, total_subs, bar_transition) {

  modulo = 0;
  current_progress = 0;
  
  var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
  var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");

  modulo = total_subs%2
  current_progress = subs_completed / total_subs * 360;

  var reload = $('.reload')
  reload.data('completed', subs_completed)
  reload.data('total', total_subs)
  reload.data('modulo', modulo)


  if (current_progress < 180) {

    rot_left = current_progress
    rot_right = 0

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

    reload.data('toggle', 1)

  } else {

    rot_left = 180
    rot_right = current_progress - 180

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

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

    reload.data('toggle', 0)

  }

  bar_transition.css({
    'transition': 'none'
  });
}


$(document).ready(function () {

  subs_completed = 3;
  total_subs = 5;

  bar_transition = $('.circle .bar_transition .sub-progress')
  
  number = $('.number')
  number.html(subs_completed   '/'   total_subs)

  setSubtaskProgressBar(subs_completed, total_subs, bar_transition)


  $(document).on('click', '.add', function () {
    subs_completed  = 1
    $('.number').html(subs_completed   '/'   total_subs)

    reload = $('.reload')
    reload.data('completed', subs_completed)
    modulo = reload.data('modulo')
    toggle = reload.data('toggle')
    total = reload.data('total')

    updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
  })

  $(document).on('click', '.remove', function () {
    subs_completed -= 1;
    $('.number').html(subs_completed   '/'   total_subs)

    reload = $('.reload')
    reload.data('completed', subs_completed)
    modulo = reload.data('modulo')
    toggle = reload.data('toggle')
    total = reload.data('total')

    updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
  })


  $(document).on('click', '.reload', function () {

    num = $(this).data('completed')   '/'   $(this).data('total')

    data = '<div class="subtask-circular-progress sub-progress-bar_transition" data-completed="' $(this).data('completed') '" data-total="' $(this).data('total') '" data-modulo="' $(this).data('modulo') '" data-toggle="' $(this).data('toggle') '"><div class="inner"></div><div class="number">' num '</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>'

    wrapper = $('.wrapper').empty();
    wrapper.append(data)
    
    // Fix is here!
    bar_transition = $('.circle .bar_transition .sub-progress');

    setSubtaskProgressBar(subs_completed, total_subs, bar_transition) 

    console.log('reload')

  })

});

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

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

1. Да, я смотрел на код Js и думал о том, что инициализируется в функции «готово», а что в «перезагрузке», а затем я заметил, что «bar_transition» отсутствует… В любом случае спасибо за решение 🙂

Метки: Круглый индикатор выполнения — CSS/JS

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Запрос Alamofire в приложении перешел в фоновый режим. Связь потеряна

Как очистить тег canvas и почему он не отображается в моем браузере?

Весенняя загрузка /swagger-ресурсы и /v2/api-документы работают, но ошибка swagger-ui 404