Skip to content

Instantly share code, notes, and snippets.

@SamSamskies

SamSamskies/simple-progress-bar.html

Last active March 28, 2016 01:44
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 SamSamskies/818d0e7c665995ebd06b to your computer and use it in GitHub Desktop.
Save SamSamskies/818d0e7c665995ebd06b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simple-progress-bar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank HTML 5 Template</title>
<style>
#progress-bar {
width: 0;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
var $progressBar = $('#progress-bar');
var DURATION = 5000; // in miliseconds
$('#start').click(() => $progressBar.animate({ width: '100%'}, DURATION));
$('#stop').click(() => $progressBar.stop());
$('#reset').click(() => {
var clearQueue = true;
$progressBar.stop(clearQueue).animate({ width: 0 });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment