Как создать, где взять прогрессбар, который на каких-то отрезках заполнен, а на остальных нет

Question

Что-то типа этого (Available), только нету вот этих промежуточных цветов (либо закрашено, либо нет).

По факту создаём отрезок.

Делим его на ограниченное количество промежутков фиксированной длины.

Какие-то конкретные промежутки закрашиваем.

В моём случае у меня не набор точек которые нужно закрасить, а набор пар значений, где каждая пара - это координата начала заполнения и координата конца.

Также необходимо, чтобы корректно обрабатывались наложения и перекрытия.

Корректно значит, что набор [ 3, 13 ], [ 8, 18 ], [ 6, 16 ] на отрезке длиной 20

--+++++++++++------- [ 3, 13 ]
-------+++++++++++-- [ 8, 18 ]
-----++++++++++----- [ 6, 16 ]
сложится в это:
--++++++++++++++++-- [ 3, 18 ]

Нужно решение, которое легко интегрируется в react или создано специально для него.

Если такого нет, то как создать при слабых навыках в css?

Answer 1

Сделал по вашему описанию, получилось что-то похожее на ваш пример.

 window.onload= function(){
            
        function start(info,s){//принимаем информацию о закрашенных областях и о кол-ве сегментов
            let hml = info.length; //определяем кол-во будущих полос 
            hml = 1 / hml; //определяем степень прозрачности 
            let innStr = "";
            for(let i = 0; i < info.length; i++){
                innStr = innStr + "<div class='mb' style='opacity: "+hml+"; margin-left: 0%;'  ></div>"
            }
            var pbb = document.getElementById("myProgress");
            pbb.innerHTML = innStr;//добавляем полоски в тело прогресс-бара
            var pr = 100/s; //находим длину 1 сегмента в процентах
            for(let i = 0; i < info.length; i++){//работаем с добавленными полосками
                let here = document.getElementsByClassName("mb")[i];
                let razn = info[i][1] - info[i][0];// вычисляем длину закрашенной области 
                razn = razn * pr;//переводим длину закрашенной области в проценты
                here.style.width = razn+"%";//присваиваем значение длинны полосе
                razn = info[i][0]*pr;//Определяем и переводим отступ от левой границы в проценты
                
                here.style.marginLeft = razn+"%";//присваиваем отступ полосе
            }
        }
        
        var info = [[3, 13],[8, 18],[6, 16]]//(логика) от конца 3 сегмента до конца 13 сегмента 
        start(info,20)
    }

    #myProgress {
    width: 100%;
    background-color: rgb(240, 235, 235);
    height: 30px;
    position: relative;
    }
    body {
    margin: 0; 
    }
    .mb {
    width: 0%;
    height: 100%;
    background-color: rgb(7, 172, 7);
    position: absolute;
    }

<div id="myProgress"></div>

БЛОГ НА HUSL

Как создать, где взять прогрессбар, который на каких-то отрезках заполнен, а на остальных нет

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