Как заверстать такой прогресс бар?

Question

[hesrun]

Как заверстать такой прогресс бар? https://monosnap.com/file/KWhkOQaqmGVGrrbvme9QT2TI...
Сам бар внутри серой обертки должен быть сделан одним элементом, чтоб я мог управлять шириной потом js-ом.
Может есть какие-то новые свойства которые накидываю фон на задний элемент?

Comments

[Ankhena]

Если красный + зеленый должны быть одним элементом, то фон обычным градиентом.

[hesrun]

Ankhena, да, но если у него ширина будет 50%, то разделение цвета будет в левой половине. А нужно чтоб до 50 была красная часть, а после 50 началась зелёная.

[Ankhena]

hesrun,

А нужно чтоб до 50 была красная часть, а после 50 началась зелёная.

Где поставите разделение, там и будет.

[hesrun]

Ankhena, https://codepen.io/hesrun/pen/rNOoLzm - накидал в песочницу с градиентом, не получается...
Мне нужно чтоб до половины это был красный, и после вторая половина была уже зеленой.
Если делать градиентом, он половинит цвет и любом размере самой прогресс полоски.

Фикс размер не подходит, это должна быть резиновая штука.

[Ankhena]

hesrun, ставьте градиент не в %, а в px.
Сколько ставить узнавайте на js.

[hesrun]

Ankhena, вы имеете ввиду прослушивать через js ширину бара, и проставлять в пикселях уже границу градиента?

Ну тогда наверное лучше будет js-om возвращать ширину в css переменную и уже ее юзать в градиенте...

[Ankhena]

hesrun, ну это уж как вам больше нравится.

Answer 1

[Игорь]

На счет новых я не знаю, но есть старый добрый linear-gradient()

Answer 2

[Вячеслав Шимарулин]

Если не слишком топить за идиоматичность решения, то можно сделать и так:

<style>
  .progress {
    position: relative;
    width: 400px;
    height: 20px;
    border-radius: 10px;
    background: #d8d8d8;
  }

  .progress-bar {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #0dac12;
    border-radius: 10px;
  }

  .progress-bar__inner {
    position: absolute;
    width: 200px;
    height: 100%;
    background: #f76844;
    border-right: 2px solid #d8d8d8;
  }
</style>

<div class="progress">
      <!-- Ширина .progress-bar зависит от процента выполнения -->
      <div class="progress-bar" style="width: 247px;">
        <!-- 1/2 ширины .progress -->
        <div class="progress-bar__inner" style="width: 200px;"></div>
      </div>
    </div>

Еще возможен вариант с применением градиента, как выше заметили.

.progress-bar {
  background: rgb(247,104,68);
  background: linear-gradient(90deg, rgba(247,104,68,1) 0%, rgba(247,104,68,1) 200px, rgba(255,255,255,1) 200px, rgba(255,255,255,1) 201px, rgba(13,172,18,1) 201px, rgba(13,172,18,1) 100%);
}

А можно еще и SVG-шку сверстать.

Answer 3

[Richard Smith]

Я не знаю какие у вас тут трудности возникли
https://codepen.io/klimsava/pen/zYvyexQ

Comments

[Ankhena]

И как вы будете управлять размерами псевдоэлементов через js?

[Richard Smith]

Ankhena, и что в этом сложного?

[Ankhena]

Klimsava, не могли бы вы показать простой пример?

[Richard Smith]

Ankhena, Вы же Куратор тега Вёрстка. А ничего лучше не предложили(
Да, невозможно напрямую получить доступ к псевдоэлементам с помощью Javascript, поскольку они не являются частью DOM. Однако можно удалять старые стили и создавать новые.

Или у вас лучше есть предложение ? ("Не согласен - критикуй, критикуешь - предлагай!")

[Ankhena]

Klimsava,

Вы же Куратор тега Вёрстка. А ничего лучше не предложили(

Попробуйте сначала почитать комментарии к вопросу, а потом писать ерунду.

Даже если предположить, что ширина ограничена минимальной и максимальной, то количество классов безумно.

[Richard Smith]

Ankhena, Так я же не говорю, что мой вариант лучший. Предложите как будет лучше в данном случае.

[Ankhena]

Klimsava,
слушайте, нельзя же так совсем невнимательно.

Давайте медленно: мой вариант был предложен первым в комментариях к вопросу за 2 дня до вашего. С ним можно ознакомится, если всё таки открыть комментарии и прочитать их.