Geek Answers Handbook

HTML5 progress bar "end" styling

I want to style the "end" of the current progress of the HTML5 progress step by adding a small black dot to it, see screen. Thus, this point should move as you move forward.

enter image description here

But the code I found here no longer works. It worked a few weeks ago or so, but now it’s not: look at the code

Maybe someone knows what happened or how to achieve my goal?

Thank you so much!

PS Here is the HTML / CSS that I use

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;
}
+4
source share
2 answers

, . . ( 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>
Hide result
+2

, -CSS :

, : (:: ) , polyfill. ,: . , , - , .

: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

, , JS :: after css.

, , .

, , , , :

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 , , , .

, , , , , .

+1

More articles:


All Articles