@deasmont

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

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

611f2952138fb016697239.png
  • Вопрос задан
  • 294 просмотра
Решения вопроса 1
SVG, и нужно разобраться с атрибутами stroke-dasharray и stroke-dashoffset:
Ответ написан
Пригласить эксперта
Ответы на вопрос 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);
Ответ написан
Комментировать
@lector_82
web front-end developer
Вот как тут можно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы