HTML5进度条＆＃34;结束＆＃34;造型

Question

我想设定＆＃34;结束＆＃34;通过添加小黑点来查看HTML5进度条的当前进度，请参见屏幕。所以这个点必须随着进度的移动而移动

但the code I found此处不再适用。它在几周前左右工作，但现在不是 - 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

您不需要伪元素来获得此效果。这里它使用主要样式的渐变。 （仅在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>

Answer 2

我在这里读到伪css似乎不能与progress元素一起使用：

  

我希望我可以使用：after（或:: after）规则，但是   这些伪元素不适用于任何浏览器中的进度标记   不使用polyfill。不，，以前也不起作用。一世   我不知道为什么它不起作用，但这是一种耻辱 - 使用它们会   完美摆脱额外的标记。

在此处找到：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 progress元素之外的其他方法来实现此功能。

Numbars与您尝试做的事情有一些类似的东西，但您可能需要修改它才能使其按照您想要的方式运行。

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