Skip to content

Instantly share code, notes, and snippets.

@arnehormann

arnehormann/gauges.html

Last active December 14, 2015 11:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arnehormann/5082064 to your computer and use it in GitHub Desktop.
Save arnehormann/5082064 to your computer and use it in GitHub Desktop.
Download ZIP
A charting experiment
Raw
gauges.html
<html><head><meta charset="utf-8"><title>Donuts</title>
<!-- This is a modified version of the one found at http://www.larentis.eu/donuts/ -->
<style type="text/css">
.donut { font-size: 33px; }
.donut-big { font-size: 62px; }
.donut-small { font-size: 17px; }
.donut {
position: relative;
display: inline-block;
line-height: 1em;
height: 1em;
width: 2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.donut:before {
content: '';
position: absolute;
font-size: 100%;
height: 2em;
width: 2em;
line-height: 1em;
border: 0.22em solid #666;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(auto, auto, 1em, auto);
}
.yellow.donut:before {border-color: #ccc366;}
.orange.donut:before {border-color: #cc8f66;}
.red.donut:before {border-color: #cc6866;}
.pink.donut:before {border-color: #cc66c3;}
.violet.donut:before {border-color: #a366cc;}
.blue.donut:before {border-color: #6670cc;}
.green.donut:before {border-color: #66cc74;}
/* ### original code ### */
/* line 75, ../sass/donuts.scss */
.donut-arrow {
bottom: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* line 87, ../sass/donuts.scss */
.donut-arrow, .donut-arrow:before {
position: absolute;
display: inline-block;
background: #333;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 95, ../sass/donuts.scss */
.donut-arrow:before {
content: '';
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/* line 21, ../sass/donuts.scss */
.donut-arrow {
font-size: 100%;
height: 1em;
width: 0.1em;
margin-left: -0.05em;
}
/* line 26, ../sass/donuts.scss */
.donut-arrow:before {
height: 0.2em;
width: 0.2em;
bottom: -0.1em;
margin-left: -0.1em;
}
</style>
</head><body>
<div class="donut donut-big">
<div class="donut-arrow" data-percentage="10"></div>
</div>
<div class="donut">
<div class="donut-arrow" data-percentage="40"></div>
</div>
<div class="donut donut-small">
<div class="donut-arrow" data-percentage="90"></div>
</div>
<div class="donut donut-big">
<div class="donut-arrow" data-percentage="0"></div>
</div>
<div class="donut donut-big">
<div class="donut-arrow" data-percentage="100"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>
$(function () {
"use strict";
$('.donut-arrow').each(function () {
var $this = $(this)
, percentage = $this.data('percentage')
, color;
if (percentage > 100)
percentage = 100;
else if (percentage < 0)
percentage = 0;
percentage *= 1.8;
$this.css('transform', 'rotate(' + (percentage - 90) + 'deg)');
if (percentage < 60)
color = 'red';
else if (percentage < 120)
color = 'yellow';
else color = 'green';
$this.parent().addClass(color);
});
});
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment