Progress Bar Without HTML5

by Fahd Shariff

HTML

<div class="progress-bar">
    <span style="width: 80%;" />
</div>
<p/>
<div class="progress-bar">
    <span style="width: 100%;" />
</div>

CSS

.progress-bar {
  background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
  width: 200px;
  height: 20px;
}

.progress-bar > span {
  background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
  height: 100%;
  display: block;
}

.progress-bar > span[style="width: 100%;"] {
  background: linear-gradient(to bottom, #ad7, #cee 20%, #7a3 45%, #7a3 55%, #ad7);
  height: 100%;
  display: block;
}