Vaelor Vaelor - 4 months ago 10
CSS Question

Custom color for a indeterminate <progress>-tag without a value

I would like to style a so called 'indeterminate'-progressbar.
(A

<progress>
-tag without a value)

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


See that codepen I found on the net as an example (not mine):

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

The difference should be obvious. The Default bar without any style has
movement in it.
What I would like to do, style that indeterminate progressbar so that it keeps 'moving' like the above.

Any means of styling always result in a 'completly' filled bar, without the moving part.

Am I doing something wrong, is that expected or a bug?
Since I am not very good with css, I am a bit at a loss here.
The internet - as far as I found information - only talks about styling normal progressbars.

Edit: Now I am even more confused. It seems to work in Edge.. (the dots seem to be the default 'progressbar' for edge).
So, a bug?
See the attached image from edge.

example from edge

Edit 2:
All of the proposed answers are for a determinate progressbar.
Looking at the codepen I provided (the 'Default'-bar), it should be clear that I mean an indeterminate progressbar.

Answer

Seems like a bug to me... When you try to apply some styles on it, Chrome seems to define the progress bar like defined, whenever it exists a value inside your tag or not. I tried with Chrome Canary too, but same thing append.

It could be a good idea to think, "go to hell you moving item, I will erase you with my own style". But apparently,

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

So I tried but yes, animations does not work anymore...

*,
*: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>

Comments