html - 没有值的不确定 标签的自定义颜色

Question

我想设计一个所谓的“不确定”进度条。(一个 <progress> - 没有值的标签)

  <progress max="100"></progress>

以我在网上找到的代码笔为例(不是我的):

http://codepen.io/anon/pen/mEWqer

区别应该是显而易见的。没有任何样式的默认栏有其中的运动。我想做的是，设置不确定进度条的样式，使其像上面那样保持“移动”。

任何样式化方式总是会产生“完全”填充的栏，没有移动部分。

我做错了什么，这是预期的还是错误？由于我对css不是很好，所以我在这里有点不知所措。互联网 - 据我所知 - 只讨论普通进度条的样式。

编辑:现在我更加困惑了。它似乎在 Edge 中工作..(点似乎是边缘的默认“进度条”)。那么，一个错误？从边缘查看附件图像。

编辑 2:所有建议的答案都是针对确定的进度条。查看我提供的代码笔(“默认”栏)，应该清楚我的意思是不确定的进度条。

Answer 1

对我来说似乎是一个错误......当您尝试在其上应用某些样式时，Chrome 似乎会像定义的那样定义进度条，无论它是否在您的标签中存在 value 。我也尝试使用 Chrome Canary，但附加了同样的东西。

这样想可能是个好主意，“见鬼去吧，我会用我自己的风格抹掉你”。但显然，

Animations don't seem to work anymore on the pseudo elements within a progress element, in Blink. At the time this was published, they did. Brian LePore reported this to me and pointed me toward this thread discussing it and created a reduced test case.

-

Maybe it's the same with the that @keyframes defined outside of the Shadow DOM can't get accessed by an element inside. From the timing it might have changed in Chromium 39/40?

https://css-tricks.com/html5-progress-element/#article-header-id-5

所以我试过了，但是是的，动画不再起作用了......

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

h1 {
  margin-top: 0;
}

progress {
  width: 100%;
}

.styled progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  /* Firefox */
  border: none;
  background: #EEE;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
}

/* lest apply somes styles on it */
.styled progress:not([value])::-webkit-progress-bar {
  background: blue;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: 3px;
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);
  -webkit-animation: animate-stripes 5s linear infinite;
          animation: animate-stripes 5s linear infinite;
}

/* this seems to does not work anymore */
@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}
@keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

.styled progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 3px;
}

.styled progress::-moz-progress-bar {
  background-color: blue;
  border-radius: 3px;
}

<div id="page-wrapper">
  <p>Default</p>
  <p>
    <progress max="100"></progress>
  </p>

  <p>Styled defined</p>
  it does not move:
  <p class="styled">
    <progress max="100" value="50"></progress>
  </p>
  <p>Styled defined</p>
  this should move:
  <p class="styled">
    <progress max="100"></progress>
  </p>