Skip to content

Instantly share code, notes, and snippets.

@stephenhay
Created July 16, 2011 10:41
Show Gist options
  • Save stephenhay/1086250 to your computer and use it in GitHub Desktop.
Save stephenhay/1086250 to your computer and use it in GitHub Desktop.
Simple HTML+CSS progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple HTML+CSS progress bar</title>
<style>
body {
/* Demo only */
font-family: Arial, sans-serif;
padding: 0 10%;
background-color: #eaeaea;
}
.graph {
width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
height: 30px;
border: 1px solid #888;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
}
#bar {
height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
background: rgb(255,197,120);
background: -moz-linear-gradient(top, rgba(255,197,120,1) 0%, rgba(244,128,38,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(244,128,38,1)));
background: -webkit-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: -o-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: -ms-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
border-top: 1px solid #fceabb;
}
#bar p { position: absolute; text-align: center; width: 100%; margin: 0; line-height: 30px; }
.error {
/* These styles are arbitrary */
background-color: #fceabb;
padding: 1em;
font-weight: bold;
color: red;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Simple HTML+CSS progress bar</h1>
<p>You could animate this, but it was intended as a progress indicator through a multi-page form process.</p>
<h2>HTML5 <code>progress</code> element with HTML/CSS fallback</h2>
<progress value="34" max="100"><div id="progress" class="graph"><div id="bar" style="width:34%"><p>34% complete</p></div></div></progress>
<p><em>(Special thanks to Krijn Hoetmer)</em></p>
<h2>Just the HTML/CSS fallback (a <code>div</code> containing another <code>div</code>)</h2>
<div id="progress" class="graph"><div id="bar" style="width:34%"><p>34% complete</p></div></div>
</body>
</html>
@muzll0dr
Copy link

muzll0dr commented Feb 4, 2016

I still come back to this when I want a dead simple CSS progress bar as quickly as possible without handcrafting one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment