Как сверстать такой прогрессбар с подписью?

Question

[EgorSabyanin]

Здравствуйте, как можно сверстать такой элемент. Подскажите как лучше всего это сделать (теги и вложенность), а также, что делать с подписью сверху и тенью.

Comments

[Aetae]

Для начала пусть дизайнер предоставит чистый элемент, причём в исходнике. А то непонянто что тут сам элемент, а что мутный фон.

- Сам прогрессбар делается легко: берём див, скругляем углы, в него before такой-же но светлее, где ширина - нужный процент и собсно сам текст процента.
- Чёрточку под текстом - hr block radial-gradient.
- Подсветки\тени - без исходника не понятно, но либо radial-gradent, либо svg из исходника, либо даже тупо полупрозрачная png из исходника.
- Размытие подложки - backdrop-filter: blur, но лучше отговорить использовать это, т.к. сильно тормозит на слабых машинах. В простых случаях можно заменить растянутой маленькой размытой картинкой.