HTML5 进度条“结束”样式答案

【问题标题】：HTML5 progress bar "ending" stylingHTML5 进度条“结束”样式
【发布时间】：2016-03-22 16:44:03
【问题描述】：

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

但是the code I found 这里不再起作用了。几周前它工作了，但现在不行了 - see the codepen

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

非常感谢！

附：这是我使用的 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;
}

【问题讨论】：

你可能不得不使用 JS
是的，我当然可以用 JS，但我想用 CSS 来做，特别是因为它以前工作过，然后就停止了
如果它的浏览器支持太差以至于即使是最新的浏览器也有粗略的覆盖范围，你可能不应该使用它。

标签： html css progress-bar

【解决方案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);
}

&lt;progress value="1400" max="4261"&gt;&lt;/progress&gt;

【讨论】：

谢谢。这太棒了，很有帮助！
很高兴它有帮助！
在 Firefox 中测试。它不起作用。它显示一个没有点的蓝色进度条。

【解决方案2】：

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

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

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

我不知道为什么它之前工作，我一直无法找到一种非 JS 方式来模拟使用 ::after css 的效果。

Here's您引用的那篇文章中的代码笔，但它不能正常工作。

他们使用的方法似乎和你一样，但没有任何功能：

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 有一些与您正在尝试执行的操作类似的内容，但您可能需要对其进行大量修改才能使其按您想要的方式运行。

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

【讨论】：