HTML5 进度条 "ending" 样式

Question

我想通过向 HTML5 进度条添加小黑点来设置 "ending" 当前进度的样式，请看屏幕。所以这个点必须随着进度的移动而移动

但是the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the codepen

也许有人知道发生了什么或如何实现我的目标？

非常感谢！

P.S。这是我使用的HTML/CSS

HTML:

<progress value="1400" max="4261"></progress>

CSS

progress {

  /* Positioning */
  position: absolute;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 50px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: #00D38D;
}

progress[value]::-webkit-progress-value {
  position: relative;
  background: #00d38d;  
}

progress[value]::-webkit-progress-value::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-radius: 50px;
  background: black;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: #00D38D;
}

progress::-moz-progress-bar {
  background-color: #00D38D;
}

Answer 1

我在这里读到伪 css 似乎不适用于进度元素：

I wish that I could have used :after (or ::after) rules instead, but these pseudo-elements don’t work with the progress tags in any browser that doesn’t use the polyfill. And no, :before doesn’t work either. I have no idea why it doesn’t work, but it’s a shame — using them would be perfect to get rid of the extra markup.

在此处找到：http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

我不确定它之前为什么起作用，我一直没能找到一种非 JS 方法来模拟使用 ::after css.

的效果

Here's 您引用的那篇文章中的一个 codepen 也不起作用。

他们使用的方法似乎与您相同，但没有任何作用：

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo 
    elements on pseudo classes. A     rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

您可能必须实施某种 javascript 或使用除 HTML5 进度元素以外的其他方法来实施。

Numbars 有一些与您正在尝试做的类似的东西，但您可能需要对其进行适当的修改以使其按您想要的方式运行。

抱歉，这不是一个完全正确的解决方案，但希望您能找到一个不太难创建的解决方法。

Answer 2

您不需要伪元素即可获得此效果。这里是在主样式上使用渐变。（仅在 Chrome 中测试）

progress {
  /* Positioning */
  position: absolute;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 50px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: #00D38D;
}

progress::-webkit-progress-value {
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}

progress::progress-value {
  background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}

<progress value="1400" max="4261"></progress>

HTML5 进度条 "ending" 样式

HTML5 progress bar "ending" styling

html

css

progress-bar