Как это можно сверстать?

Question

Саму линию получилось сверстать, а вот как написать в конце 80%, не знаю.

Answer 1

Например так:

body {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.progress {
  height: 30px;
  width: 100%;
  background-color: #f2f2f1;
  position: relative;
  z-index: 0;
  display: flex;
}

.progress__loading {
    background-color: #00cd6b;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 5px;
}

<div class="progress">
    <div class="progress__loading" style="width: 80%">80% </div>
</div>

БЛОГ НА HUSL

Как это можно сверстать?

Ответы (1 шт):