Как сверстать пародию на тег progress в виде круга?

Question

[Heorhii]

Здравствуйте, хочу сверстать несколько div'ов (как на картинке), но не знаю как это сделать, собственно сверстать то такие блоки вовсе не проблема, непонятно как их "согнуть", если попробовать с помощью border так же явно не получится. С какой стороны подступиться?

Comments

[Lynn «Кофеман»]

SVG

[Lynn «Кофеман»]

https://css-tricks.com/building-progress-ring-quickly/

Answer 1

[Сергей Соколов]

SVG, и нужно разобраться с атрибутами stroke-dasharray и stroke-dashoffset:

Comments

[Heorhii]

Неплохо, изящно
Спасибо!

Answer 2

[Slonoed]

Блоки сгибаются через border-radius: 50%;
А анимацию делать примерно так (sass notation):

.loader
  animation: rotation 1s infinite linear;
  border: 3px solid rgba(70, 84, 14, 0.2);
  border-radius: 50%;
  border-top-color: rgba(70, 84, 14, 0.8);
  display: inline-block;
  height: 2em;
  width: 2em;
  margin: 0 1em;

@keyframes rotation
  to
    transform: rotate(360deg);

Answer 3

[Lector]

Вот как тут можно