how to add a circle at end of HTML "progress" bar created with <progress> tag-CodePudding

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%));
}

CodePudding user response：

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>

CodePudding user response：

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 >
<div >
<div >.</div>
</div>
</div>