Skip to content

Instantly share code, notes, and snippets.

@matherton

matherton/index.htm

Created August 5, 2015 11:46
Show Gist options
  • Save matherton/a7d0f3fb62f6977468fb to your computer and use it in GitHub Desktop.
Save matherton/a7d0f3fb62f6977468fb to your computer and use it in GitHub Desktop.
Download ZIP
Progress bars for 4 stages
Raw
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>
Raw
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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment