Skip to content

Instantly share code, notes, and snippets.

@eric-khoury

eric-khoury/progressbar.html

Last active May 27, 2016 11:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eric-khoury/729143a81c3ae33b2d2e13bd245bc74e to your computer and use it in GitHub Desktop.
Save eric-khoury/729143a81c3ae33b2d2e13bd245bc74e to your computer and use it in GitHub Desktop.
Download ZIP
Simple html/jquery progressbar
Raw
progressbar.html
<!DOCTYPE html>
<html>
<style>
body {
width: 80%;
margin: 0 auto;
text-align: center;
padding-top: 200px;
}
#progressWrapper {
position: relative;
width: 500px;
height: 30px;
background-color: #ddd;
margin: 0 auto;
}
#progressBar {
position: absolute;
width: .5%;
height: 100%;
background-color: #4CAF50;
}
</style>
<body>
<div id="progressWrapper">
<div id="progressBar"></div>
</div>
<br>
<input type="checkbox" class="question" onclick="move(event)" />
<input type="checkbox" class="question" onclick="move(event)" />
<input type="checkbox" class="question" onclick="move(event)" />
<input type="checkbox" class="question" onclick="move(event)" />
<input type="checkbox" class="question" onclick="move(event)" />
<input type="checkbox" class="question" onclick="move(event)" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function move(event) {
var bar = $("#progressBar");
var totalQuestions = $("input.question").length;
var answeredQuestions = $("input.question:checked").length;
var totalWidth = $("#progressWrapper").width();
var stepWidth = (totalWidth / totalQuestions);
if (event.target.checked == true) {
bar.css('width', (bar.width() + stepWidth));
}else {
bar.css('width', (bar.width() - stepWidth));
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment