Как сверстать блок с прогрессом?

Question

Как сверстать такой блок? Блок идёт вверх, заполняется по мере получения опыта и пролистывается вверх.

Answer 1

сделал код который требует минимум тегов, чтобы не захламлять

настройку цветов и шрифтов вы уж сами

.progress {
  display:        flex;
  flex-direction: column;
  justify-content:  space-between;
  
  width:          36px;
  height:         calc(72px * 5);
  
  font-size:      0;
  
  margin-top:     50px;
}

.progress  div {
  position:       relative;
  
  width:          36px;
  height:         36px;
  line-height:    36px;
  
  border-radius:  calc(18px + 2px);
  border:         3px solid #d0d0d0;
  
  text-align:     center;
  
  font-size:      24px;
  font-weight:    700;
  font-family:    Calibri;
  
  color:          #d0d0d0;
}

.progress  div:before {
  position:       absolute;
  left:           16px;
  top:            -23px;
  
  content:        '';
  width:          3px;
  height:         18px;
  
  background:     #d0d0d0;  
}

.progress  div:after {
  position:       absolute;
  left:           16px;
  bottom:         -23px;
  
  content:        '';
  width:          3px;
  height:         18px;
  
  background:     #d0d0d0;  
}

.progress  .current, .progress .current ~ div {
  border:         3px solid lime;
  color:          lime;  
}

.progress  .current:after, .progress .current ~ div:after, .progress .current ~ div:before {
  background:     lime;  
}

<div class = 'progress'>
  <div>5</div>
  <div>4</div>
  <div class = 'current'>3</div>
  <div>2</div>
  <div>1</div>
</div>

P.S.

упс, пока код писал думал, что между линиями и кругами отступ должен быть, ну это исправить через корректировку top, bottom на 2 пикселя можно

БЛОГ НА HUSL

Как сверстать блок с прогрессом?

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