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