Skip to content

Instantly share code, notes, and snippets.

@jordanthomas

jordanthomas/progress-bar.html

Created April 12, 2016 13:28
Show Gist options
  • Save jordanthomas/b5040cd4acba5ec5fcf3f925286303e0 to your computer and use it in GitHub Desktop.
Save jordanthomas/b5040cd4acba5ec5fcf3f925286303e0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
progress-bar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
body {
font-family: sans-serif;
background: #fff;
}
svg {
height: 100%;
width: 100%;
}
.progress-bar {
height: 25px;
}
</style>
<div class="progress-bar">
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask">
<rect width="100%" height="100%" x="-50%" y="0" fill="#fff"/>
</mask>
</defs>
<rect width="100%" height="100%" fill="#eee" />
<g fill="green">
<text text-anchor="middle" x="50%" y="50%" dy=".3em">50%</text>
</g>
<g mask="url(#mask)">
<rect width="100%" height="100%" fill="green" />
<g fill="#fff">
<text class="theCount" text-anchor="middle" x="50%" y="50%" dy=".3em">50%</text>
</g>
</g>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment