Progress Bar with HTML and CSS

Question

I want to create a progress bar like in the below image:

I have no idea about

Answer 1

Progress Bar without nested divs... for every element where the css linear-gradient works.

Here the JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();

#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}

<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>

Answer 2

Same as @RoToRa's answer, with a some slight adjustments (correct colors and dimensions):

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}

<div id="progressbar">
  <div></div>
</div>

Here's the fiddle: jsFiddle

And here's what it looks like:

Answer 3

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}

<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>