jgonera · August 29, 2015 13:58
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Animated responsive bar chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        background: #2e232b;
        color: #fff;
        font-family: Georgia, serif;
        font-size: 20px;
      }

      table {
        width: 100%;
        border-spacing: 0;
      }

      th {
        font-weight: normal;
        width: 1em;
        line-height: 2em;
        white-space: nowrap;
      }

      td {
        padding: .2em 0;
        height: 2em;
        text-indent: -9999px;
        border-left: 1px solid #6b656e;
      }

      table div {
        background: #1f171d;
        height: 100%;
        transition: width 1s ease-in-out;
      }

      .wrong div {
        background: #ff4130;
      }

      .frozen table div {
        width: 0 !important;
      }

      /* desktop */
      @media all and (min-width: 40em) {
        .chart {
          width: 600px;
        }

        th {
          text-align: right;
          padding-right: 15px;
        }
      }

      /* mobile */
      @media all and (max-width: 40em) {
        th, td {
          display: block;
        }

        th {
          z-index: 1;
          text-align: left;
          padding-left: 10px;
        }

        td {
          margin-top: -2.2em;
        }
      }
    </style>
  </head>
  <body class="frozen">
    <div class="chart">
      <table>
        <tr>
          <th>14 billion</th>
          <td>434</td>
        </tr>
        <tr class="wrong">
          <th>1 billion</th>
          <td>234</td>
        </tr>
        <tr>
          <th>31 billion</th>
          <td>56</td>
        </tr>
        <tr>
          <th>21 billion</th>
          <td>367</td>
        </tr>
      </table>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
    <script>
      var max = Math.max.apply(null, $('td').map(function() {
        return parseInt($(this).text());
      }));

      $('tr').each(function(i) {
        var $td = $(this).find('td');
        var $bar = $('<div>')
          .css('width', (parseInt($td.text()) / max * 100) + '%')
          .css('transition-delay', i * 0.1 + 's');
        $td.html($bar);
      });

      setTimeout(function() {
        $('body').removeClass('frozen');
      }, 0);
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Animated responsive bar chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	background: #2e232b;
	color: #fff;
	font-family: Georgia, serif;
	font-size: 20px;
	}

	table {
	width: 100%;
	border-spacing: 0;
	}

	th {
	font-weight: normal;
	width: 1em;
	line-height: 2em;
	white-space: nowrap;
	}

	td {
	padding: .2em 0;
	height: 2em;
	text-indent: -9999px;
	border-left: 1px solid #6b656e;
	}

	table div {
	background: #1f171d;
	height: 100%;
	transition: width 1s ease-in-out;
	}

	.wrong div {
	background: #ff4130;
	}

	.frozen table div {
	width: 0 !important;
	}

	/* desktop */
	@media all and (min-width: 40em) {
	.chart {
	width: 600px;
	}

	th {
	text-align: right;
	padding-right: 15px;
	}
	}

	/* mobile */
	@media all and (max-width: 40em) {
	th, td {
	display: block;
	}

	th {
	z-index: 1;
	text-align: left;
	padding-left: 10px;
	}

	td {
	margin-top: -2.2em;
	}
	}
	</style>
	</head>
	<body class="frozen">
	<div class="chart">
	<table>
	<tr>
	<th>14 billion</th>
	<td>434</td>
	</tr>
	<tr class="wrong">
	<th>1 billion</th>
	<td>234</td>
	</tr>
	<tr>
	<th>31 billion</th>
	<td>56</td>
	</tr>
	<tr>
	<th>21 billion</th>
	<td>367</td>
	</tr>
	</table>
	</div>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
	<script>
	var max = Math.max.apply(null, $('td').map(function() {
	return parseInt($(this).text());
	}));

	$('tr').each(function(i) {
	var $td = $(this).find('td');
	var $bar = $('<div>')
	.css('width', (parseInt($td.text()) / max * 100) + '%')
	.css('transition-delay', i * 0.1 + 's');
	$td.html($bar);
	});

	setTimeout(function() {
	$('body').removeClass('frozen');
	}, 0);
	</script>
	</body>
	</html>
No results found