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?
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>