CSS 5 steps progress bar

css-5-steps-progress-bar.markdown

CSS 5 steps progress bar

CSS only progress bar in 5 steps. JS is only used for animating the demo.

A Pen by Brian Redfern on CodePen.

License.

index.html

<progress value="100" max="100"></progress>
<!-- 
Note: values must be reversed in order for this to work.
  Meaning progress bar should have a value of 0 when it should be filled completly and vice versa.
-->

script.js

/** 
 * This code is only used for animating the progress bar
 *     it can be safely removed
 *     as all styling is done in CSS
 */
var progressVal = $('progress').val(),
    progressStep = 20,
    progressDirection = 1;

setInterval(function() {
  console.log(progressDirection, progressVal);
  
  if (progressDirection > 0 && progressVal < 100) {
    progressVal += progressStep;
    $('progress').val(progressVal);
  } else if (progressDirection < 0 && progressVal > 0) {
    progressVal -= progressStep;
    $('progress').val(progressVal);
  } else if (progressVal == 100) {
    progressDirection = -1;
  } else if (progressVal == 0) {
    progressDirection = 1;
  }
}, 500)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html{text-align:center;}
progress[value]{width:300px;height:50px;border:1px solid #ccc;border-radius:2px;margin:100px 0;color:#fff;
	background: -moz-linear-gradient(left, #0057a9 0%, #0057a9 19%, transparent 19%, transparent 21%, #79ce00 21%, #79ce00 39%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 59%, transparent 61%, #ffb750 61%, #ffb750 79%, transparent 79%, transparent 81%, #ff0000 81%, #ff0000 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0057a9), color-stop(19%,#0057a9), color-stop(19%,transparent), color-stop(21%,transparent), color-stop(21%,#79ce00), color-stop(39%,#79ce00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(59%,transparent), color-stop(61%,transparent), color-stop(61%,#ffb750), color-stop(79%,#ffb750), color-stop(79%,transparent), color-stop(81%,transparent), color-stop(81%,#ff0000), color-stop(100%,#ff0000));
	background: -webkit-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: -o-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: -ms-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: linear-gradient(to right, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
progress[value]::-webkit-progress-bar{background-color:transparent;position:relative;}
progress[value]::-webkit-progress-value{width:100%;background-color:#fff;background-size:100%;position:relative;overflow:hidden;
	 -webkit-transition:width 0.6s ease;
	-moz-transition:width 0.6s ease;
	-o-transition:width 0.6s ease;
	transition:width 0.6s ease;
}