Блог

Главная - Вопросы по программированию - как я могу изогнуть индикатор выполнения в css

как я могу изогнуть индикатор выполнения в css

#javascript #html #css #svg

Вопрос:

Я хотел бы создать индикатор прогресса, подобный этой кривой прогресса . Но я не знаю, как это сделать. Я создал этот прямой индикатор выполнения, и вот мой 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>

как я могу перейти к индикатору выполнения ? возможно ли это или мне нужно попробовать другой тег?

Комментарии:

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

2. @Терри, не могли бы вы привести мне пример, как я могу это сделать? Я еще никогда не использовал svg.

3. Вам нужно нарисовать <path> себя с пользовательским d атрибутом, который включает дуги/кривые , так как вы хотите, чтобы линия изгибалась. Используйте графическую программу (Illustrator или другую программу, которая может выполнять векторный рисунок), чтобы сделать рисунок вместо d того, чтобы самостоятельно писать атрибут от руки. Затем прогресс просто иллюстрируется настройкой stroke-dashoffset : опять же, операция, требующая больших математических затрат, поэтому сначала вам нужно будет хорошо разобраться в вещах.

Ответ №1:

Мое предложение состояло бы в том, чтобы использовать SVG и разделить элементы на карте метро на разные <symbol> элементы. Для построения пути/прогресса <use> можно использовать и трансформировать в нужное положение.

Сам прогресс достигается с помощью селектора CSS как для цвета линий, так и для точек. Для примера вы можете использовать элемент диапазона для управления ходом выполнения.

 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>
Метки: