Custom style progress bar html element-CodePudding

HTML

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

I want to customize this progress element and place a triangle marker above this progress bar.marker should be placed at the end of the progress bar value line that is here 75 %.

Is it possible to achieve this by Using only HTML and CSS by styling progress HTML element?

Can anyone please help me with this.

CodePudding user response：

Add the following Bootstrap 5 link to your HTML file.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

The progress bar without label:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

The Progress bar with label:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >
    <div  role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>
</div>

CodePudding user response：

I think that what you want

.progress {
  margin-top:50px;
  position: relative !important;  
  background-color: rgb(51, 122, 183);
}

#arrow {
  position: absolute;
  margin-left: -16px;
  left: 75%;
  z-index: 999;
  margin-top: -22px;
  transform: rotate(180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<img src="https://i.imgur.com/q2BqI65.png" id=arrow alt=arrow>
<div >
  <div id=theprogress  aria-valuenow="75" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">75%</div>
</div>