CODEWITHSUNDEEP
htmlcsssass
Jipindas P
Jipindas P

Reputation: 3

Custom style progress bar html element

HTML

<div class="progress-container">
  <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.

Upvotes: 0

Views: 696

Answers (2)

Aneeb
Aneeb

Reputation: 799

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 class="progress">
  <div id=theprogress class="progress-bar" aria-valuenow="75" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">75%</div>
</div>

Upvotes: 0

Jannat Badar
Jannat Badar

Reputation: 56

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 class="progress-container">
  <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 class="w-75">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>
</div>

Upvotes: 1

Related Questions