I would like to create a progress bar like this curve progress . But i don't know how to make it. I created this one straight progress bar and here is my css code

.progbar{
  top: 165px;
  left: 100px;
  width: 1450px;
  height: 20px;
  background: rgb(0, 157, 220);
  position:absolute;
  z-index: -1;
  border-radius: 30%;
}
.progbar {
  color: lightblue;
  border-radius: 20px;
}

.progbar::-webkit-progress-value {
  background: lightblue;
  border-radius: 20px;
}

.progbar::-moz-progress-bar {
  background: lightcolor;
  border-radius: 20px;
}

.progbar::-webkit-progress-value {
  background: rgb(153, 152, 152);
  border-radius: 20px;
}

.progbar::-webkit-progress-bar {
  background: rgb(0, 157, 220);
  border-radius: 20px;
}

<div class="content">
        <div class="mlogo">
            <img id="mlogo" src="">
        </div>
        <div class="metroHat"> BAŞAKŞEHİR-METROKENT >> KİRAZLI</div>
        <div><img class="metrologo" src="./images/metroistanbul-drm-ornek-07.png"></div>
        <div class="lejant" id="lejant"></div>
        <progress class="progbar" id="progress" value="0" max="100"></progress>
        <div class="durakIsimleri" id="durakIsimleri"></div>
        <div class="durakyerleri" id="durakyerleri"></div>
        <div class="aktarmaNoktaları" id="aktarmaNoktaları"></div>
        <div id="ok">
            <!-- <img src="images/tren.png" /> -->
        </div>

    </div>

how can i curve to a progress bar ? is it possible or do i have to try an another tag?

CodePudding user response：

My suggestion would be to use SVG and split the elements on the metro map into different <symbol> elements. To construct the path/progress <use> can be used and transformed into the right position.

The progress itself is made by a CSS selector for both the color of the lines and the dots. For the example you can use the range element to control the progress.

document.forms.form01.range.addEventListener('change', e => {
  let numlines = parseInt(e.target.value);
  let numdots = (numlines < 1) ? 0 : numlines 1;
  document.querySelector('#styles').innerHTML = `
    .lines use:nth-child(-n ${numlines}) {
      stroke: DarkSlateBlue;
    }
    .dots use:nth-child(-n ${numdots}) {
      stroke: DarkSlateBlue;
    }`;  
});

#line line {
  stroke-width: 6px;
}

#dot circle {
  stroke-width: 3px;
  fill: white;
}

#down path, #up path {
  stroke-width: 6px;
  fill: none;
}

svg use {
  stroke: SteelBlue;
}

<svg viewBox="0 0 250 50">
  <defs>
    <symbol id="line">
      <line x1="0" y1="3" x2="40" y2="3" />
    </symbol>
    <symbol id="dot" transform="translate(-6 -3)">
      <circle cx="6" cy="6" r="4" fill="white" />
    </symbol>
    <symbol id="down">
      <path  transform="translate(0 3)" d="M 0,0 C 25,0 15,20 40,20" />
    </symbol>
    <symbol id="up">
      <path  transform="translate(0 3)" d="M 0,20 C 25,20 15,0 40,0" />
    </symbol>
  </defs>
  <style id="styles"></style>
  <g class="lines">
    <use href="#line" transform="translate(10 10)"/>
    <use href="#line" transform="translate(50 10)"/>
    <use href="#down" transform="translate(90 10)"/>
    <use href="#up"   transform="translate(130 10)"/>
    <use href="#line" transform="translate(170 10)"/>
  </g>
  <g class="dots">
    <use href="#dot" transform="translate(10 10)"/>
    <use href="#dot" transform="translate(50 10)"/>
    <use href="#dot" transform="translate(90 10)"/>
    <use href="#dot" transform="translate(130 30)"/>
    <use href="#dot" transform="translate(170 10)"/>
    <use href="#dot" transform="translate(210 10)"/>
  </g>
</svg>

<form name="form01">
  <input type="range" name="range" min="0" max="5" value="0"/>
</form>