Me gustaría crear una barra de progreso como esta curva de progreso . Pero no sé cómo hacerlo. Creé esta barra de progreso directa y aquí está mi código css
.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>¿Cómo puedo curvarme a una barra de progreso? ¿Es posible o tengo que probar con otra etiqueta?
Mi sugerencia sería usar SVG y dividir los elementos en el mapa del metro en diferentes elementos <symbol> . Para construir la ruta/progreso, <use> puede usarse y transformarse en la posición correcta.
El progreso en sí lo realiza un selector CSS tanto para el color de las líneas como para los puntos. Para el ejemplo, puede usar el elemento range para controlar el progreso.
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>