JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress progress-70">
  Прогресс 70%
</div>
<div class="progress progress-45">
  Прогресс 45%
</div>
<div class="progress progress-30">
  Прогресс 30%
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 50px;
  font-family: 'Neucha', cursive;
}


.progress {
  margin-bottom: 20px;
  background: #999 linear-gradient(to right, green var(--point), transparent var(--point));
  color: white;
  text-align: center;
}

.progress-70 {
  --point: 70%
}

.progress-45 {
  --point: 45%;
}

.progress-30 {
  --point: 30%;
}