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

body {
  text-align: center;
  margin-top: 50px;
  background: #2a2a2a;
}
progress {
  border:none;
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  width: 500px;
  height: 30px;
  border-radius: 6px;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.75), 0 1px rgba(255, 255, 255, 0.08);
}
progress[value]::-moz-progress-bar {
  width: 100%;
  padding: 6px;
 background-image:
  -moz-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
  -moz-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #f44);
  border-radius: 6px;
  
}


progress[value]::-webkit-progress-bar {
  width: 100%;
  background: transparent;
  border-radius: 6px;
}

progress[value]::-webkit-progress-value  {
  background-image: -webkit-linear-gradient( 135deg, transparent, transparent 33%, rgba(0,0,0,.1) 33%, rgba(0,0,0,.1) 66%, transparent 66%), -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0,0,0,.2)), -webkit-linear-gradient( left, #09c, #f44);
  border-radius: 6px;
}