0

Expected Result

What did I achieve

I could able to get progress bar with below code, but couldn't find solution how to add a small circle on the progress bar ?

HTML

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

CSS

progress {
  width: 90%;
  display: block; /* default: inline-block */
  padding: 3px;
  border: 0 none;
  background: rgb(215, 211, 211);
  border-radius: 14px;
}

progress::-moz-progress-bar {
  border-radius: 12px;
  background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  border-radius: 12px;
  background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
vikramvi
  • 3,312
  • 10
  • 45
  • 68
  • 1
    I don't think that's possible with the `progress` element. I'd recommend to build it using divs and use scripts to change the value. It might also give you some animation possibilities when changing the value. – beerwin Jul 01 '22 at 11:49
  • It's possible, check the accepted answer below – vikramvi Jul 04 '22 at 10:50

2 Answers2

2

Add a second background using a radial-gradient

progress {
  width: 90%;
  display: block; /* default: inline-block */
  margin-bottom:1em;
  padding: 3px;
  border: 0 none;
  background: rgb(215, 211, 211);
  border-radius: 14px;
}

progress::-moz-progress-bar {
  border-radius: 12px;
  background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  border-radius: 12px;
  background: radial-gradient(4px at 97%,white,white 4px,transparent),linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%))
    ;
}
<progress max="100" value="75"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="25"></progress>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Any idea why can't I see this property in chrome dev tool ? – vikramvi Jul 01 '22 at 14:47
  • Found, answer to above comment here https://stackoverflow.com/questions/10174719/how-can-i-inspect-and-tweak-before-and-after-pseudo-elements-in-browser – vikramvi Jul 04 '22 at 10:49
-1

I have no idea how to add a circle at the end of the progress element, but it is possible to do it with the div element

CSS:

.first{
    width: 90%;
    display: block; /* default: inline-block */
    padding: 3px;
    border: 0 none;
    background: rgb(215, 211, 211);
    border-radius: 14px;
  }

  .second{
    background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    border-radius: 14px;
    height: 10px;
    width: 75%;
  }

  .third{
    width: 10px;
    background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
    border-radius: 60px;
    height: 8px;
    width: 8px;
    margin: 1px;
    margin-right: 1px !important;
    float: right;
    margin-right: 0px;
    color: white;
  }

HTML:

<div class="first">
<div class="second">
<div class="third">.</div>
</div>
</div>
Aku
  • 1
  • 4