Круговой SVG Прогресс бар

#svg

Есть прогресс бар








Как сделать чтобы оранжевая полоса начиналась свержу с центра окружности.
Не могу понять? что значит атрибут stroke-dasharray, точнее  значения в нем

100 - это длина оранжевой полоски

1000 - растояние между такими полосками

В чем измеряется данная величина и как сделать точку отсчета именно сверху? 

Да, и как можно эту оранжевую полосу анимировать?
    

Ответы

Ответ 1






С начало обясню автору что такое stroke-dasharray:

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах.
Если задано одно значение, второе значение считается равным первому.

Подробно о всех свойствах рассказано здесь.

А это пример который хотел автор:






Ответ 2

По сути stroke-dasharray может содержать несколько значения 10,20,30..., где четными
по порядку будут идти длины заполненных линий и нечетными - длины промежутков. После
окончания - все повторяется. Все, что вам надо - это задать длину прогресса и максимальную
длину без длины прогресса (чтобы избавиться от повторения), на подложке первым должен
быть 0 (длина заполненной), потом - длина пустоты равная длинне прогресса и снова максимальную
длину без длины прогресса.



function setProgress(elementId, val) {
  let el = document.getElementById(elementId);
  let backProgressEl = el.children[0];
  let progressEl = el.children[1];
  let maxLength = backProgressEl.getTotalLength();
  let progressLength = maxLength * val;
  backProgressEl.setAttribute('stroke-dasharray', '0,' + progressLength  + ',' +
(maxLength  - progressLength));
  progressEl.setAttribute('stroke-dasharray', progressLength + ',' + (maxLength 
- progressLength));
}

setProgress('progressBar', .3);

setTimeout(function() {
  setProgress('progressBar', .8);
}, 2000);
circle {
  transition: stroke-dasharray 1s;
}