Progress bar with css

Question

Well I’m trying to build a progress bar with css, and the progress value is 13.20% The problem is that this getting a degrade effect, and I want it to change from one color to another.

.notification {
padding: 15px;
    color:#FFFFFF;
    font-style: italic;
    text-align: center;
    background:#F65314;
  background: -moz-linear-gradient(left, #F65314 13.20%, #000 86.80%);
  background: -webkit-linear-gradient(left, #F65314 13.20%, #000 86.80%);
  background: linear-gradient(left, #F65314 13.20%, #000 86.80%);
}

<div class="notification">
  erwerwerwrwrwerw
</div>

Answer 1

There’s probably a better way to do this, but one of the ways to do it, based on your code, is to put the degrade without transition between one color and another:

.notification {
padding: 15px;
    color:#FFFFFF;
    font-style: italic;
    text-align: center;
    background:#F65314;
  background: -webkit-linear-gradient(left, #F65314 13.20%, #000 13.20%);
}

<div class="notification">
  Carregando
</div>

Answer 2

Friend, the Html5 has an option for this

*,*:before, *:after{
  box-sizing: border-box

}

body{
background: silver;
}

.progress{
  width: 100%;
  height: 20px;
  background: black;
}

.progress .status{
  background: white;
  float: left;
  height: 100%;
  padding-left: 5px;
  font-size: 12px;
  line-height: 1.8
}

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

<!-- Maneira com CSS e HTML -->

<div class="progress">
    <div class="status" style="width: 30%">30%</status>
  </div>

Answer 3

Like what friends showed by css. If you want you have the option to do in bootstrap.

Basic Progress Bar

13.20% Complete