Skip to content

Instantly share code, notes, and snippets.

@henrik

henrik/percent-bg.html

Created June 16, 2010 09:34
Show Gist options
  • Save henrik/440391 to your computer and use it in GitHub Desktop.
Save henrik/440391 to your computer and use it in GitHub Desktop.
Download ZIP
Use background gradient to show progress bar in table cell.
Raw
percent-bg.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid #000; }
.bar {
background-image: -webkit-gradient(linear, left top, right top, from(green), to(white), color-stop(0.75, green), color-stop(0.75, white));
background-image: -moz-linear-gradient(0, green 0%, green 75%, white 75%, white 100%);
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>
title
</td>
<td style="width:100px" class="bar">
75 %
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment