How to make animation 2 and a half turns?

Question

css

Сейчас по клику анимация оборота происходит единожды, чтобы произошло 2 оборота, нужно дважды произвести клик, но как сделать, чтобы кликнув один раз, анимация сработала 2,5 раза? (То есть сначала один оборот, потом второй оборот и потом прогресс остановился на половине оборота).
Пробовал цикл, но он не ждет анимации - получается что сначала как бы идет нормальный оборот, а после он идет уже в обратную сторону.
Вот код https://codepen.io/catcliff/pen/RwNyzvq?editors=0010

Answer 1

Set progress to 0 at initialization.

setProgress(0, '.progressbar__thumb');
click__me.addEventListener('click', function() {  
   setProgress(number += 200, '.progressbar__thumb');
});

Well, the design

for(let i = 0; i < 2; i++){
   setProgress(number += 100, '.progressbar__thumb');
  }

I don’t understand why you can’t put +200 right away?

Answer 2

How can I make a circle fill yellow - more than once?