1

Нужно сделать градиентную полосу обозначающую уровень заполненности, градиент должен быть горизонтальный, с двумя цветами разными цветами слева и справа, ниже от полосы должны быть значения 0 (слева) и 1 000 000₽ (справа), пример того как это должно выглядеть:

Цвета:

  • Цвет слева: rgb(223, 89, 80)
  • Цвет справа: rgb(69, 16, 70)
  • Задний фон: rgb(18, 18, 18)
1
  • @aleksandrbarakin а если изменить вопрос аля "Range input с градиентом" и т.п. то он уже полезен (не смотрел есть уже такие или нет)
    – InDevX
    23 окт 2022 в 10:18

4 ответа 4

1

function setProgress(val){
  $('.progress').css('width', val + '%');
}
setProgress(20)
body {background: #333; margin: 100px 25px}
.line {
  height: 6px;
  border-radius: 3px;
  background: #eee;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.progress {
  width: 0;
  height: 6px;
  background: linear-gradient(to right, #DF5950, #451046);
  position: absolute;
  top: 0;
  left: 0;
}
.points {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.point {
  color: #5F5F5F;
  margin-top: 10px;
 }
.min {text-align: left}
.max {text-align: right}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressBar">
  <div class="line">
    <div class="progress"></div>
  </div>
  <div class="points">
    <div class="point min">0</div>
    <div class="point max">1 000 000</div>
  </div>
</div>

3
  • Ну вы и намудрили со стилями, grid, бесполезные transition и overflow, но выглядит красиво. Кстати, text-align: left не нужно было применять, текст по стандарту слева :p
    – ΝNL993
    23 окт 2022 в 16:43
  • grid - да, можно и по другому, сделал как быстрее; overflow - не обязательно, но желательно, в данном случае это нужно чтобы полоса прогресса не портила скругления; transition - это для красоты, чтобы плавно обновлять прогресс, можно выставить с временем побольше, кстати; text-align - да, не обязательно, но вдруг от родительского элемента в какой-то ситуации унаследует другое значение, я же не знаю контекста вашего кода, поэтому указал явно на всякий случай
    – Kliraks
    23 окт 2022 в 16:52
  • @ΝNL993 Но и Ваше решение тоже не то что бы вау. От флотов можно было бы уже давно отказаться в пользу флексов. Согласен, что тут гриды не нужны, но это решение понять проще, KISS никто не отменял 24 окт 2022 в 5:33
0

Ну раз уж все публикуют ответы, то давайте и я свой :)

:root {
  --progress: 55%;
  --left-color: rgb(223, 89, 80);
  --right-color: rgb(69, 16, 70);
  --bg: rgb(18, 18, 18);
}

body {
  background-color: var(--bg);
  color: rgb(255, 255, 255);
}

#bar, #gradient {
  display: block;
  height: 6px;
}

#bar {
  content: '';
  width: 100%;
  background-color: rgb(255, 255, 255);
  margin-bottom: 5px;
}

#gradient {
  width: var(--progress);
  background-image: linear-gradient(90deg, var(--left-color), var(--right-color));
}

#bar, #nums {
  display: block;
  width: 100%;
}

#nums {
  font-weight: 500;
  font-family: Arial, sans-serif;
  opacity: .5;
}

#nums > :last-child {
  float: right;
}
<div>
  <div id="bar">
    <div></div>
    <div id="gradient"></div>
  </div>
  <div id="nums">
    <span>0</span>
    <span>1 000 000₽</span>
  </div>
</div>

0

Не стоит делать прогрессбар, ты потом намучаешься с ним. Попробуй такой код:

<style>
    body {
        background: rgb(18, 18, 18);
        color:white;
    }
    .progress {
        width: 100%;
        height: 10px;
        background: white;
    }
    
    .progress .bar {
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, rgb(223, 89, 80), rgb(69, 16, 70));
    }
    
    .progress .bar .value {
        width: 0%;
        height: 10px;
        background:white;
        float:right;
    }
    
    .min {
        color:gray;
        margin: 3px;
        float: left;
    }
    
    .max {
        margin: 3px;
        color: gray;
        float:right;
    }
</style>
<body>
<div class="progress">
    <div id="bar" class="bar">
        <div id="val" class="value">
        
        </div>
    </div>
</div>
<div class="min">0</div>
<div class="max">1 000 000₽</div> 
<br>
</body>
<script>
    function progress(val) {
        document.getElementById('val').style.width = (100-val) + "%";
    }
    
    progress(70)
</script>
8
  • Наоборот, можно сократить код и будет работать правильно. В вашем коде #val "вытесняет" ширину #bar. Если вообще удалить #val и в js управлять шириной #bar - будет все правильно jsfiddle.net/j70tx6zo
    – Kliraks
    23 окт 2022 в 15:11
  • @Kliraks , привет, заметьте отличие. bar всегда должен быть 100% чтобы градиент работал правильно. Я имею ввиду, тут градиент фиксированный. 23 окт 2022 в 16:49
  • Если посмотреть на оригинальную картинку то так и сделано. 23 окт 2022 в 16:51
  • соглашусь, тогда можно так: jsfiddle.net/j70tx6zo/1
    – Kliraks
    23 окт 2022 в 17:02
  • Задача выполнена, посмотрим что выберет автор вопроса. И у меня почему-то не открывается этот сайт... 23 окт 2022 в 17:26
0

#x{
display: list-item;
list-style: inside '0';
width: 400px;
height: 1em;
margin-top: 1.3em;
position: relative;
background: rgb(18, 18, 18);
border: .3em solid rgb(18, 18, 18);
border-top: 1.3em solid rgb(18, 18, 18);
color: gray;
}

#x:before{
content: 'магия одного блока';
color: lime;
text-align: center;

background: repeating-linear-gradient(90deg, rgb(223, 89, 80),
rgb(69, 16, 70) 70% 70%, lightgray, lightgray 70% 70%, lightgray);/* !!! */
width: 98%;
height: .5em;
top: -1em;
left: 1%;
z-index: 2;
}
#x:after{
content: '1 000 000';
right: 0;
bottom: 0;
}
#x:after, #x:before{position: absolute; display: block;}
<div id='x'></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.