Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div class="pollAnswerBar">15</div>
  <div class="pollAnswerBar">50</div>
  <div class="pollAnswerBar">75</div>
  
  
</body>
</html>
 
​
.pollAnswerBar {
    position: relative;
    font-size: 50px;
    width:1em;
    height:1em;
    float: left;
}
.pollAnswerBar > .percent {
    position: absolute;
    top: 1.05em;
    left: 0.5em;
    right: 0.5em;
    width: 3.33em;
    font-size: 0.2em;
    text-align: center;
}
.pollAnswerBar > #slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip:rect(0px,1em,1em,0.5em);
}
.pollAnswerBar > #slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pollAnswerBar > #slice > .pie {
    border-color: red;
    border-width: 0.1em;
    border-style: solid;
    position: absolute;
    width: 0.8em; /* 1 - (2 * border width) */
    height: 0.8em; /* 1 - (2 * border width) */
    clip: rect(0em, 0.5em, 1em, 0em);
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em; 
    border-radius: 0.5em; 
}
.pollAnswerBar > #slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
 
jQuery(document).ready(function() {
​
    function drawCounter(percent) {
        jQuery('div.pollAnswerBar').html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 / 100 * percent;
        jQuery('#slice .pie').css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent').html(Math.round(percent) + '%');
    }
​
    jQuery('.pollAnswerBar').each(function() {
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers