How to Change Color of Bootstrap Progress Bar with Custom Color

How can I change color of bootstrap progress bar with custom color

Using Bootstrap 3.2.0, you can do something like the following:

$(function() { 

   $("#one").addClass("progress-bar-purple");

   $("#two").addClass("progress-bar-orange");

});

.progress-bar-purple {

      background-color: purple !important;

}

.progress-bar-orange {

      background-color: orange !important;

}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br/>

<div class="progress">

  <div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

    60%

  </div>

</div>

<div class="progress">

  <div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">

    80%

  </div>

</div>

How to assign custom color to progress bar bootsrap 4

With CSS variables and multiple background you can do it:

.progress .progress-bar {
  background: 
    linear-gradient(green  0 0) 0/ calc(var(--w)*1% - 70%) 1px, 
    linear-gradient(orange 0 0) 0/ calc(var(--w)*1% - 50%) 1px, 
    red;
  width: calc(var(--w)*1%);
}

.progress .progress-bar::before {
  content: attr(style) "%";
  font-family:monospace;
  text-indent:-4ch;
  margin:auto;
  overflow:hidden;
}

html {
  font-size:25px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="progress">
  <div class="progress-bar" style="--w:20"></div>
</div>

<div class="progress">
  <div class="progress-bar" style="--w:80"></div>
</div>

<div class="progress">
  <div class="progress-bar" style="--w:60"></div>
</div>

change color of Twitter bootstrap progress bar

You should set the height of the .bar element to 100%, otherwise it's height will be 0 (because it doesn't have any content).

.bar {

  background-color: green;

  height: 100%;

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="progress">

  <div class="bar" style="width: 60%;"></div>

</div>

React Bootstrap Progress Bar Computed Color

Sample Image

.progress-bar is a class. You need to use the class selector .

const styles = {
  progressBar: {
      height: 250,
      '& .progress-bar': { /* add the period */
          backgroundColor: 'black'
      },
  }
}

As a side note, you can also utilize the variant prop of the react-bootstrap progress bar. Examples:

<ProgressBar variant="warning" now={60} />
<ProgressBar variant="danger" now={80} />

react-bootstrap readily provides you the themes for the progress bars

Changing the inner colour of the react bootstrap ProgressBar

If you have ref to your bar component you can find it's child by class and then change its color.

  useEffect(() => {
    if (ref.current) {
      const inner = ref.current.querySelector(".progress-bar");
      if ( inner ) {
         inner.style.backgroundColor = "green";
      }
    }
  }, [ref]);

  <ProgressBar ref={ref} now={20} /* other stuff */ />

Progress bar - color change

HTML:

<div id="container">
    <p>You have used 815 gb!</p>
    <progress color="red" value = "815" max = "1000" > </progress>
</div>

CSS:

:root{
    --progColor: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    --progHeight: 20px;
}

#container{
  width: fit-content;
  height: fit-content;
  background-color: #172657;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  color: white;
}

progress, progress::-webkit-progress-value {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: var(--progColor);
}
progress::-webkit-progress-bar {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: white;
}

progress::-moz-progress-bar {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: var(--progColor);
}

A lot of the code for the progress bar is repeated to work on different browsers. For the white box at the top-right, I would recommend looking into absolute positioning and looking up SVGs in CSS. An SVG will allow you to put in coordinates that will align to create the message shape. Absolute positioning will allow you to put the message over the progress bar.
Additionally, I would recommend changing the font and customizing the colors to your preference.