matherton/index.htm

## index.htm
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Progress bar demo</title>

  <meta name="description" content="vanilla progress bar">
  <meta name="author" content="Mark Atherton">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="styles.css">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

	<h1>Progress bar demo</h1>

	<div class="progressBar">
		<!-- styles for step 1 -->
		<ol class="panel background">
			<li id="circle1" class="circle">1</li>
			<li id="circle2" class="circle unvisited">2</li>
			<li id="circle3" class="circle unvisited">3</li>
			<li id="circle4" class="circle unvisited">4</li>
		</ol>
	</div>

	<div class="progressBar">
		<!-- styles for step 2 -->
		<ol class="panel background">
			<li id="circle1" class="circle complete">1</li>
			<li id="circle2" class="circle">2</li>
			<li id="circle3" class="circle unvisited">3</li>
			<li id="circle4" class="circle unvisited">4</li>
		</ol>
	</div>

	<div class="progressBar">
		<!-- styles for step 3 -->
		<ol class="panel background">
			<li id="circle1" class="circle complete">1</li>
			<li id="circle2" class="circle complete">2</li>
			<li id="circle3" class="circle">3</li>
			<li id="circle4" class="circle unvisited">4</li>
		</ol>
	</div>

	<div class="progressBar">
		<!-- styles for step 4 -->
		<ol class="panel background">
			<li id="circle1" class="circle complete">1</li>
			<li id="circle2" class="circle complete">2</li>
			<li id="circle3" class="circle complete">3</li>
			<li id="circle4" class="circle">4</li>
		</ol>
	</div>


<!-- Link to external JavaScript file
  <script src="js/scripts.js"></script>  -->
</body>
</html>

## styles.css
/* Progress bar css with 4 stages */

/*NOTE: as steps are added within .progress it's width will need to be adjusted as well as .circle margin-right */

.progressBar {
	max-width: 385px;/* 385px 27.5em */
	position: relative;
	height: 30px;
}

.progressBar ol {
	list-style-type: none;
	padding-left: 0;
}

li.circle {

}

.circle {
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: 4px solid #007d3b;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	background: #fff;
	margin-right: 20%;
	position: relative;
    float: left;
}

.circle.unvisited {
	border: 4px solid #999;
}

.circle.complete {
	background: #007d3b;
	color: #fff;
}

#circle4 {
	margin-right: 0;
}

div.background {
    position: relative;
}

.background:before {
    border-top: 3px solid #999;
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 16px; /* altertered from 50% to half height of circle as 50% no longer worked */
    left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

.background:after {
    clear: both;
}

.background span {
    /* to hide the lines from behind the text, you have to set the background color the same as the container */
    background: #fff;
    padding: 0 15px;
}
/* target mobile phone portrait and landscape NOTE: as steps are added within .progress
it's width will need to be adjusted + .circle margin-right */
@media (min-device-width: 320px) and (max-device-width:480px) {

	.progressBar {
		max-width: 300px;
	}
	.circle {
		margin-right: 16%;
	}

}
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Progress bar demo</title>

	<meta name="description" content="vanilla progress bar">
	<meta name="author" content="Mark Atherton">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="styles.css">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>

	<body>

	<h1>Progress bar demo</h1>

	<div class="progressBar">
	<!-- styles for step 1 -->
	<ol class="panel background">
	<li id="circle1" class="circle">1</li>
	<li id="circle2" class="circle unvisited">2</li>
	<li id="circle3" class="circle unvisited">3</li>
	<li id="circle4" class="circle unvisited">4</li>
	</ol>
	</div>

	<div class="progressBar">
	<!-- styles for step 2 -->
	<ol class="panel background">
	<li id="circle1" class="circle complete">1</li>
	<li id="circle2" class="circle">2</li>
	<li id="circle3" class="circle unvisited">3</li>
	<li id="circle4" class="circle unvisited">4</li>
	</ol>
	</div>

	<div class="progressBar">
	<!-- styles for step 3 -->
	<ol class="panel background">
	<li id="circle1" class="circle complete">1</li>
	<li id="circle2" class="circle complete">2</li>
	<li id="circle3" class="circle">3</li>
	<li id="circle4" class="circle unvisited">4</li>
	</ol>
	</div>

	<div class="progressBar">
	<!-- styles for step 4 -->
	<ol class="panel background">
	<li id="circle1" class="circle complete">1</li>
	<li id="circle2" class="circle complete">2</li>
	<li id="circle3" class="circle complete">3</li>
	<li id="circle4" class="circle">4</li>
	</ol>
	</div>


	<!-- Link to external JavaScript file
	<script src="js/scripts.js"></script> -->
	</body>
	</html>
	/* Progress bar css with 4 stages */

	/NOTE: as steps are added within .progress it's width will need to be adjusted as well as .circle margin-right /

	.progressBar {
	max-width: 385px;/* 385px 27.5em */
	position: relative;
	height: 30px;
	}

	.progressBar ol {
	list-style-type: none;
	padding-left: 0;
	}

	li.circle {

	}

	.circle {
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: 4px solid #007d3b;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	background: #fff;
	margin-right: 20%;
	position: relative;
	float: left;
	}

	.circle.unvisited {
	border: 4px solid #999;
	}

	.circle.complete {
	background: #007d3b;
	color: #fff;
	}

	#circle4 {
	margin-right: 0;
	}

	div.background {
	position: relative;
	}

	.background:before {
	border-top: 3px solid #999;
	content:"";
	margin: 0 auto; /* this centers the line to the full width specified */
	position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
	top: 16px; /* altertered from 50% to half height of circle as 50% no longer worked */
	left: 0; right: 0; bottom: 0;
	width: 95%;
	z-index: -1;
	}

	.background:after {
	clear: both;
	}

	.background span {
	/* to hide the lines from behind the text, you have to set the background color the same as the container */
	background: #fff;
	padding: 0 15px;
	}
	/* target mobile phone portrait and landscape NOTE: as steps are added within .progress
	it's width will need to be adjusted + .circle margin-right */
	@media (min-device-width: 320px) and (max-device-width:480px) {

	.progressBar {
	max-width: 300px;
	}
	.circle {
	margin-right: 16%;
	}

	}