如何仅使用CSS将图像定位到进度条的值

Question

如何仅使用CSS将蓝色圆圈用作进度条的值？ 进度条本身只有2像素高度，代表进度条值的圆圈要大得多。

＆＃13;

＆＃13;

.circle {
  width: 20px;
  height: 20px;
  border: 2px solid blue;
  border-radius: 50%;
}

progress {
  background-color: #9da29b;
  border: 0;
  height: 2px;
  width: 100%;
  margin-top: 5em;
}

progress::-webkit-progress-bar {
  background-color: #9da29b;
}

progress::-webkit-progress-value {
  background-color: #f01010;
}

progress::-moz-progress-bar {
  background-color: #9da29b;
}

#this-is-not-that-i-want {
  background-color: #9da29b;
  border: 0;
  height: 30px;
  width: 100%;
  margin-top: 5em;
}

#this-is-not-that-i-want::-webkit-progress-value {
  background-color: #f01010;
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}

#this-is-not-that-i-want::progress-value {
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
}

＆＃13;

<div class="circle"></div>

<progress id="it-is-smaller-than-the-circle" value="60" max="100"></progress>

<progress id="this-is-not-that-i-want" value="60" max="100"></progress>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/mg5Lvx5z/1/

Answer 1

如果我理解正确，您可以使用：after在进度条中创建一个伪元素，然后将其置于进度级别。

#it-is-smaller-than-the-circle::-webkit-progress-value {position: relative;}
#it-is-smaller-than-the-circle::-webkit-progress-value:after {
  content:'';
  display:block;
    width:20px;
    height:20px;
    border:2px solid blue;
    border-radius: 50%;
  position:absolute;
  left:100%;
  margin:-10px 0 0 -10px;
}

工作小提琴https://jsfiddle.net/mg5Lvx5z/2/