Create a gist now

Instantly share code, notes, and snippets.

@pshihn /README.md
Last active Feb 14, 2017

What would you like to do?
Sketchy Progress Bar
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//roughjs.com/builds/rough.min.js"></script>
<style>
button {
font-size: 18px;
font-family: monospace;
padding: 10px 15px;
background: steelblue;
color: white;
border-radius: 10px;
border: none;
box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.4);
cursor: pointer;
margin-right: 20px;
}
#controls {
position: absolute;
left: 20px;
top: 200px;
font-size: 18px;
}
</style>
<canvas></canvas>
<div id="controls">
<button onclick="onButton()">Start</button>
<label></label>
</div>
<script>
var width = 960, height = 500;
var barHeight = 120, barWidth = width - 20;
var rough = new RoughCanvas(document.querySelector("canvas"), width, height);
var outerRect = rough.rectangle(10, 40, barWidth, barHeight);
outerRect.roughness = 0.3;
var progressBar = rough.rectangle(10, 40, 0, barHeight);
progressBar.fill = "rgba(0,0,255,0.6)";
var button = document.querySelector("button");
var label = document.querySelector("label");
var running = false;
function onButton() {
if (!running) {
button.textContent = "Stop";
running = true;
var incr = function() {
if (running) {
progress = Math.min(progress + 1, 100);
progressBar.width = (progress/100) * barWidth;
label.textContent = progress + "%";
if (progress == 100) {
onButton();
} else {
setTimeout(incr, 150);
}
}
};
var progress = 0;
progressBar.width = (progress/100) * barWidth;
setTimeout(incr, 500);
} else {
running = false;
button.textContent = "Start";
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment