Created
July 6, 2012 18:02
-
-
Save phongjalvn/3061683 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple Gauge · CodePen</title> | |
| <style> | |
| .gauge-wrap { | |
| position:relative; | |
| margin:0 0 20px; | |
| width:200px; | |
| height:100px; | |
| } | |
| .gauge-core { | |
| position:relative; | |
| overflow:hidden; | |
| height:inherit; | |
| width:inherit; | |
| } | |
| .gauge-wrap-before { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| bottom:-7px; /* 1px less to cover clipping */ | |
| left:0px; | |
| clip: rect(8px, 16px, 16px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-wrap-after { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| bottom:-7px; /* 1px less to cover clipping */ | |
| right:0px; | |
| clip: rect(8px, 16px, 16px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-bg { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| -webkit-border-radius:100px; | |
| -moz-border-radius:100px; | |
| border-radius:100px; | |
| z-index:0; | |
| } | |
| .gauge-active-wrap { | |
| position: absolute; | |
| top:0; | |
| left:0; | |
| width: 200px; | |
| height: 200px; | |
| overflow:hidden; | |
| -webkit-border-radius:100px; | |
| -moz-border-radius:100px; | |
| border-radius:100px; | |
| } | |
| .gauge-active { | |
| top:100px; | |
| position: absolute; | |
| width: 200px; | |
| height: 100px; | |
| overflow:visible; | |
| -webkit-border-radius:0px 0px 200px 200px; | |
| -moz-border-radius:0px 0px 200px 200px; | |
| border-radius:0px 0px 200px 200px; | |
| z-index:1; | |
| } | |
| .gauge-active-before { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| background-color: inherit; | |
| top:-7px; /* 1px less to cover clipping */ | |
| left:0px; | |
| clip: rect(0px, 16px, 8px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-cap { | |
| position: absolute; | |
| top:16px; | |
| left:16px; | |
| width: 168px; | |
| height: 168px; | |
| -webkit-border-radius:84px; | |
| -moz-border-radius:84px; | |
| border-radius:84px; | |
| z-index:5; | |
| } | |
| /* dem */ | |
| body { | |
| background:#323138; | |
| } | |
| #main { | |
| width:720px; | |
| margin:0 auto; | |
| } | |
| .box { | |
| float:left; | |
| padding:20px; | |
| width:200px; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="10"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="20"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="30"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="40"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="50"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="60"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="70"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="80"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="90"></div> | |
| </div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <script> | |
| (function() { | |
| (function($) { | |
| $.fn.simpleGauge = function(options) { | |
| // Defaults | |
| var defaults = { | |
| width: '200', | |
| hueLow: '1', // Choose the starting hue for the active color (for value 0) | |
| hueHigh: '128', // Choose the ending hue for the active color (for value 100) | |
| saturation: '100%', // Saturation for active color | |
| lightness: '50%', // Lightness for active color | |
| gaugeBG: '#1b1b1f', // Background color of Gauge | |
| parentBG: '#323138' // This color should match the parent div of the gauge (or beyond) | |
| }; | |
| var settings = $.extend({}, defaults, options); | |
| $(this).each(function(){ | |
| // Color & Data Settings | |
| var value = $(this).data('value'); | |
| var activeColor = ''; | |
| if ( settings.hueHigh >= settings.hueLow ) { | |
| activeColor = ( ( settings.hueHigh - settings.hueLow ) * ( value / 100 ) ) + settings.hueLow; | |
| } else { | |
| activeColor = ( ( settings.hueLow - settings.hueHigh ) * ( value / 100 ) ) + settings.hueHigh; | |
| } | |
| // Add DOM to allow for CSS3 Elements (would have been more elegant to use :before & :after pseudo-elements, but jQuery doesn't support them) | |
| $(this).prepend('<div class="gauge-wrap-before"></div><div class="gauge-core"><div class="gauge-bg"></div><div class="gauge-active-wrap"><div class="gauge-active"><div class="gauge-active-before"></div></div></div><div class="gauge-cap"></div></div><div class="gauge-wrap-after"></div>'); | |
| // Set Colors | |
| if ( value ) { | |
| $(this).find('.gauge-active, .gauge-wrap-before').css('background-color', 'hsla(' + Math.round(activeColor) + ', ' + settings.saturation + ', ' + settings.lightness + ', 1)'); | |
| } else { | |
| $(this).find('.gauge-active, .gauge-wrap-before').hide(); | |
| } | |
| $(this).find('.gauge-bg, .gauge-wrap-after').css('background-color', settings.gaugeBG); | |
| $(this).find('.gauge-cap').css('background-color', settings.parentBG); | |
| // Fill Gauge to match value | |
| $(this).find('.gauge-active-wrap').css({ | |
| '-webkit-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-moz-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-ms-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-o-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| 'transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| }); | |
| }); | |
| }; | |
| })(jQuery); | |
| $(function() { | |
| $('.gauge-wrap').simpleGauge(); | |
| }); | |
| })(); | |
| </script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/noeltock/pen/simple-css-jquery-gauge/3">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $.fn.simpleGauge = function(options) { | |
| // Defaults | |
| var defaults = { | |
| width: '200', | |
| hueLow: '1', // Choose the starting hue for the active color (for value 0) | |
| hueHigh: '128', // Choose the ending hue for the active color (for value 100) | |
| saturation: '100%', // Saturation for active color | |
| lightness: '50%', // Lightness for active color | |
| gaugeBG: '#1b1b1f', // Background color of Gauge | |
| parentBG: '#323138' // This color should match the parent div of the gauge (or beyond) | |
| }; | |
| var settings = $.extend({}, defaults, options); | |
| $(this).each(function(){ | |
| // Color & Data Settings | |
| var value = $(this).data('value'); | |
| var activeColor = ''; | |
| if ( settings.hueHigh >= settings.hueLow ) { | |
| activeColor = ( ( settings.hueHigh - settings.hueLow ) * ( value / 100 ) ) + settings.hueLow; | |
| } else { | |
| activeColor = ( ( settings.hueLow - settings.hueHigh ) * ( value / 100 ) ) + settings.hueHigh; | |
| } | |
| // Add DOM to allow for CSS3 Elements (would have been more elegant to use :before & :after pseudo-elements, but jQuery doesn't support them) | |
| $(this).prepend('<div class="gauge-wrap-before"></div><div class="gauge-core"><div class="gauge-bg"></div><div class="gauge-active-wrap"><div class="gauge-active"><div class="gauge-active-before"></div></div></div><div class="gauge-cap"></div></div><div class="gauge-wrap-after"></div>'); | |
| // Set Colors | |
| if ( value ) { | |
| $(this).find('.gauge-active, .gauge-wrap-before').css('background-color', 'hsla(' + Math.round(activeColor) + ', ' + settings.saturation + ', ' + settings.lightness + ', 1)'); | |
| } else { | |
| $(this).find('.gauge-active, .gauge-wrap-before').hide(); | |
| } | |
| $(this).find('.gauge-bg, .gauge-wrap-after').css('background-color', settings.gaugeBG); | |
| $(this).find('.gauge-cap').css('background-color', settings.parentBG); | |
| // Fill Gauge to match value | |
| $(this).find('.gauge-active-wrap').css({ | |
| '-webkit-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-moz-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-ms-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| '-o-transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| 'transform': 'rotate(' + (value * 1.8) + 'deg)', | |
| }); | |
| }); | |
| }; | |
| })(jQuery); | |
| $(function() { | |
| $('.gauge-wrap').simpleGauge(); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="main"> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="10"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="20"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="30"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="40"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="50"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="60"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="70"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="80"></div> | |
| </div> | |
| <div class="box"> | |
| <div class="gauge-wrap" data-value="90"></div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gauge-wrap { | |
| position:relative; | |
| margin:0 0 20px; | |
| width:200px; | |
| height:100px; | |
| } | |
| .gauge-core { | |
| position:relative; | |
| overflow:hidden; | |
| height:inherit; | |
| width:inherit; | |
| } | |
| .gauge-wrap-before { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| bottom:-7px; /* 1px less to cover clipping */ | |
| left:0px; | |
| clip: rect(8px, 16px, 16px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-wrap-after { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| bottom:-7px; /* 1px less to cover clipping */ | |
| right:0px; | |
| clip: rect(8px, 16px, 16px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-bg { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| -webkit-border-radius:100px; | |
| -moz-border-radius:100px; | |
| border-radius:100px; | |
| z-index:0; | |
| } | |
| .gauge-active-wrap { | |
| position: absolute; | |
| top:0; | |
| left:0; | |
| width: 200px; | |
| height: 200px; | |
| overflow:hidden; | |
| -webkit-border-radius:100px; | |
| -moz-border-radius:100px; | |
| border-radius:100px; | |
| } | |
| .gauge-active { | |
| top:100px; | |
| position: absolute; | |
| width: 200px; | |
| height: 100px; | |
| overflow:visible; | |
| -webkit-border-radius:0px 0px 200px 200px; | |
| -moz-border-radius:0px 0px 200px 200px; | |
| border-radius:0px 0px 200px 200px; | |
| z-index:1; | |
| } | |
| .gauge-active-before { | |
| position:absolute; | |
| width:16px; | |
| height:16px; | |
| background-color: inherit; | |
| top:-7px; /* 1px less to cover clipping */ | |
| left:0px; | |
| clip: rect(0px, 16px, 8px, 0px); | |
| -webkit-border-radius:8px; | |
| -moz-border-radius:8px; | |
| border-radius:8px; | |
| z-index:5; | |
| } | |
| .gauge-cap { | |
| position: absolute; | |
| top:16px; | |
| left:16px; | |
| width: 168px; | |
| height: 168px; | |
| -webkit-border-radius:84px; | |
| -moz-border-radius:84px; | |
| border-radius:84px; | |
| z-index:5; | |
| } | |
| /* dem */ | |
| body { | |
| background:#323138; | |
| } | |
| #main { | |
| width:720px; | |
| margin:0 auto; | |
| } | |
| .box { | |
| float:left; | |
| padding:20px; | |
| width:200px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment